我想覆盖全局 .Mui-disabled
我的主题中的 CSS 规则覆盖。我可以为这样的特定组件执行此操作(在 Material-UI v4.1.x 中):
MuiTheme['overrides'] = {
...
MuiMenuItem: {
root: {
...root level overrides,
'&.$Mui-disabled': {
backgroundColor: 'inherit'
}
}
}
}
我想避免将其添加到每个不同的组件中,而只需覆盖
.Mui-disabled
类(class)规则一次。基本上我不希望所有禁用的项目都具有默认的灰色背景。有没有一种简单的方法可以从主题中做到这一点?感谢您的任何见解!
最佳答案
我正在努力计算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 },
}
}),
);
关于javascript - 从主题覆盖 .Mui-disabled(或其他伪类/状态)(MUI v4.1.X),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56843818/