material ui Mui按钮禁用时V5更改指针

Question

试图在禁用按钮时更改光标和启动图标，在主题中防止每个按钮重复，但找不到解决方案。 &:hover没有考虑到，在override中找不到startIcon属性。

如有任何帮助，我们将不胜感激。运行 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

Mui 的 Button 组件已 pointer-events: none; 设置为禁用。

参见：source code

您可以覆盖它：

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"
    }
  }
}

有关工作示例，请参阅 codesandbox i've made。

material ui Mui按钮禁用时V5更改指针

material ui V5 change pointer when MuiButton is disabled

material-ui

styling