从主题(MUI v4.1.x)中覆盖

Question

我想从主题覆盖中覆盖全局.Mui-disabled CSS规则。我可以为这样的特定组件(在材料-UI v4.1.x中(这样做：

MuiTheme['overrides'] = {
  ...
  MuiMenuItem: {
    root: {
      ...root level overrides,
      '&.$Mui-disabled': {
        backgroundColor: 'inherit'
      }
    }
  }
}

我想避免需要将其添加到每个不同的组件中，而只需一次覆盖.Mui-disabled类规则即可。基本上，我不希望所有禁用项目具有默认的灰色背景。有一种简单的方法可以从主题中做到这一点吗？

感谢您的任何见解！

Answer 1

我正在努力弄清楚自己如何替代伪级。我发现有两种方法；

定义自定义主题时在全球范围内；

export const CKWTheme = createMuiTheme({
    overrides: {
        MuiCssBaseline: {
            '@global': {
                //override the pseudo-classes
                '.Mui-disabled': { opacity: .5 }
                '.Mui-selected': { background: 'red' }
            }
        }
    },
});

哪些次数无济于事，因为它们被应用了更多的CSS特异性。在这种情况下，您可以在定义组件的样式时覆盖它们；

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            borderRadius: theme.shape.borderRadius,
            '&.Mui-disabled': {
                color: theme.palette.primary.main,
                opacity: 0.5,
            },
            '&.Mui-disabled:hover': { background:theme.palette.secondary.main },
        }
    }),
);

Answer 2

我在MUI -4中尝试，似乎您也可以覆盖主题，例如 -

import { createTheme } from '@material-ui/core/styles'
const theme = createTheme({
  overrides: {
    MuiCheckbox: {
      colorPrimary: {
        '&.Mui-disabled': {
          color: '#your-custom-color'
        }
      }
    }
  }
})

Answer 3

用于MUI V5

export const theme = createTheme({
  components: {
      components: {
      MuiCssBaseline: {
        styleOverrides: (theme) => ({
          '& .Mui-disabled': {
            cursor: 'not-allowed',
            '& *': {
              cursor: 'not-allowed !important',
            },
          },
          button: {
            '&:disabled': {
              cursor: 'not-allowed',
              pointerEvents: 'all !important',
            },
          },
        }),
      },
  },
});

官方文档参考

Answer 4

在MUI 5中用于使用特定按钮的样式。

import { Button, styled } from "@mui/material";
const StyledButton = styled(Button)(({ theme }) => ({
  "&.Mui-disabled": {
    opacity: 0.6,
    pointerEvents: "auto",
    "&:hover": {
      cursor: "not-allowed",
      background: "skyblue",
    },
  },
}));