单独使用禁用的类并不能提供足够的特异性来覆盖IconButton 中的默认样式。此外，您不想覆盖整个复选框的背景颜色，否则它将填充获得复选框悬停效果的整个区域；相反，您只想定位复选框中的图标（即使这样也略显理想——稍后会详细介绍）。
下面是一种定义样式的方法，该样式具有足够的特异性以仅针对图标。覆盖光标需要一些额外的工作，因为默认情况下，Material-UI会禁用禁用按钮上的指针事件（复选框利用 SwitchBase，它使用使用 ButtonBase 的 IconButton）并且光标 CSS 在禁用指针事件时无效。下面的 CSS 将指针事件重新打开，但随后有必要关闭之前通过pointerEvents: 'none'.
const useStyles = makeStyles((theme) => ({
backgroundColorOnWholeIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto',
'&:hover': {
backgroundColor: 'transparent',
},
cursor: 'not-allowed',
'& .MuiSvgIcon-root': {
backgroundColor: '#eee',
},
},
},
}));
不幸的是，这仍然不能产生您可能想要的东西。复选框图标的框不会延伸到图标所在的 24 像素×24 像素框的边缘，因此当您设置背景颜色时，它会溢出框外：
为了填充复选框的内框而不更改该框外几个像素的颜色，您需要创建一个自定义图标。
下面的代码创建了一个自定义图标，它与默认的未选中图标相同，只是它添加了第二条路径，复制了复选框的内框，没有任何填充，以便可以通过 CSS 定位它。
import React from 'react';
import createSvgIcon from '@material-ui/icons/utils/createSvgIcon';
export default createSvgIcon(
<>
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
<path fill="none" class="innerBox" d="M19 5v14H5V5h14" />
</>,
'CustomUnchecked'
);
然后您可以按如下方式定位此内盒：
const useStyles = makeStyles((theme) => ({
backgroundColorOnInnerBoxOfCustomIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto',
'&:hover': {
backgroundColor: 'transparent',
},
cursor: 'not-allowed',
'& .MuiSvgIcon-root .innerBox': {
fill: '#eee',
},
},
}
}));
为了使它起作用，您需要在复选框上指定自定义图标。如果您希望所有禁用的复选框看起来像这样，也可以通过主题完成所有这些操作。
下面是一个工作示例，展示了makeStyles通过主题和主题进行此操作。
import { Checkbox } from '@material-ui/core';
import {
makeStyles,
createMuiTheme,
ThemeProvider,
} from '@material-ui/core/styles';
import CustomUncheckedIcon from './CustomUnchecked';
import React from 'react';
const useStyles = makeStyles((theme) => ({
backgroundColorOnInnerBoxOfCustomIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto',
'&:hover': {
backgroundColor: 'transparent',
},
cursor: 'not-allowed',
'& .MuiSvgIcon-root .innerBox': {
fill: '#eee',
},
},
},
backgroundColorOnWholeIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto',
'&:hover': {
backgroundColor: 'transparent',
},
cursor: 'not-allowed',
'& .MuiSvgIcon-root': {
backgroundColor: '#eee',
},
},
},
}));
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
props: {
MuiCheckbox: {
icon: <CustomUncheckedIcon />,
},
},
overrides: {
MuiCheckbox: {
root: {
'&.Mui-disabled': {
pointerEvents: 'auto',
'&:hover': {
backgroundColor: 'transparent',
},
cursor: 'not-allowed',
// This syntax is necessary (instead of just ".MuiSvgIcon-root") because of the nested theme causing the global class names to be suffixed)
'& [class*=MuiSvgIcon-root] .innerBox': {
fill: '#eee',
},
},
},
},
},
});
const App = () => {
const classes = useStyles();
return (
<ThemeProvider theme={defaultTheme}>
<div style={{ marginBottom: '16px' }}>
Styled via makeStyles
<br />
Disabled without custom icon:
<Checkbox
className={classes.backgroundColorOnWholeIcon}
disabled={true}
name="Disabled checkbox"
/>
<br />
Disabled:
<Checkbox
className={classes.backgroundColorOnInnerBoxOfCustomIcon}
disabled={true}
icon={<CustomUncheckedIcon />}
name="Disabled checkbox"
/>
Enabled:
<Checkbox
icon={<CustomUncheckedIcon />}
className={classes.backgroundColorOnInnerBoxOfCustomIcon}
name="Enabled checkbox"
/>
</div>
<ThemeProvider theme={theme}>
<div>
Styled via theme
<br />
Disabled:
<Checkbox disabled={true} name="Disabled checkbox" />
Enabled:
<Checkbox name="Enabled checkbox" />
</div>
</ThemeProvider>
</ThemeProvider>
);
};
export default App;
