material-uistyling

material ui V5 change pointer when MuiButton is disabled


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

Solution

  • 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.