问禁用MuiButton时material ui V5更改指针
EN

Stack Overflow用户

提问于 2021-11-01 18:06:40

回答 1查看 205关注 0票数 0

当一个按钮被禁用时，试图改变光标和startIcon，在主题中防止重复使用每个按钮，但是找不到解决方案。&: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
              },
            },
          },
        },
      },
    });

material-ui

styling

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-01 18:32:29

禁用时，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。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69800945

复制

相似问题

问禁用MuiButton时material ui V5更改指针
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用MuiButton时material ui V5更改指针EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用MuiButton时material ui V5更改指针
EN