Trying to change the cursor and startIcon when a button is disabled, in the theme to prevent from repeating for each button, but can not find the solution.
&:hover
is not taking into account, and can not find the startIcon
property in override.
Any help would be appreciated. Running MUI V5.0.6
const theme = createTheme({
palette: {
primary: {
main: white,
},
secondary: {
main: "#19857b",
},
error: {
main: red.A400,
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
backgroundColor: blue[200],
"&.Mui-disabled": {
backgroundColor: "#ef9a9a",
},
"&:hover": {
backgroundColor: blue[400],
},
"&.Mui-disabled:hover": {
cursor: "not-allowed", <-- has no effect, the cursor is still a pointer
startIcon <-- property doesn't exists
},
},
},
},
},
});
By default, Mui's Button
component has pointer-events: none;
when disabled.
You can change this by adding pointer-events: unset;
to your style override, which will allow the cursor
CSS style to work:
MuiButton: {
styleOverrides: {
root: {
backgroundColor: "blue",
"&.Mui-disabled": {
pointerEvents: "unset", // allow :hover styles to be triggered
cursor: "not-allowed", // and custom cursor can be defined without :hover state
backgroundColor: "#ef9a9a"
},
"&:hover": {
backgroundColor: "green"
}
},
// styles applied when `startIcon` prop is set
startIcon: {
// styles applied to the icon when disabled
".Mui-disabled &": {
color: "red"
},
color: "yellow"
}
}
}
See this code sandbox for a working example.