Question

我想从主题替代中覆盖全局.Mui-disabled CSS规则。我可以针对像这样的特定组件（在Material-UI v4.1.x中）做到这一点：

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

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

感谢您的见解！

Answer 1

我正在努力弄清自己how to override pseudo-classes的身影。我发现了两种方法；

在定义自定义主题时进行全局设置；

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

从主题（MUI v4.1.X）覆盖.Mui禁用（或其他伪类/状态）

1 个答案: