Material-UI MenuItem 禁用项颜色设置不生效问题求助

问题原因 #

MUI 所有带有.Mui-disabled类的组件默认会添加opacity: 0.5的半透明样式，你当前只覆盖了color属性，没有重置透明度，所以就算颜色值设置和普通状态一致，叠加半透明效果后视觉上也会显得更浅。

修复方案 #

在禁用态的样式规则中补充opacity: 1重置透明度即可，修改后的代码如下：

export default makeStyles((theme: Theme) =>
  createStyles({
    root: {
      '&.MuiMenuItem-root': {
        color: '#000000',
      },
      '&.Mui-disabled': {
        color: '#000000',
        opacity: 1,
      },
    },
  }),
);

如果修改后样式仍未生效，说明选择器优先级不够，可以调整选择器层级，或者临时加!important测试：

opacity: 1 !important;

内容的提问来源于stack exchange，提问作者IBG