material ui V5 change pointer when MuiButton is disabled

user_9168390 0
Viewed 896

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
              },
            },
          },
        },
      },
    });
material-ui styling
1 Answers

Mui's Button component have pointer-events: none; set when disabled.

See: source code

You can override this:

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 the codesandbox i've made for a working example.

user_92361220
Related