material ui V5 change pointer when MuiButton is disabled

Question

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
              },
            },
          },
        },
      },
    });

Answer 1

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.