Mui v5 使用theme的styleOverrides配置组件样式不生效问题

问题原因 #

1. 你当前配置中background设置的值为#000（黑色），和你预期的白色#fff不匹配。
2. 你将样式配置在了MuiSelect的root插槽下，该插槽对应Select外层的容器元素，实际承载可交互内容的选择框区域对应select插槽，给外层容器设置背景会被内部默认透明的输入区域覆盖，所以看不到效果。

解决方案 #

直接修改主题配置中的插槽字段即可生效，修改后的完整主题配置如下：

const theme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        // 将root改为select，直接作用到选择框的可交互区域
        select: {
          background: '#fff',
        },
      },
    },
  },
});

可选拓展方案 #

如果你需要对所有standard变体的输入类组件（包括普通Input、Select等）统一设置背景，也可以直接配置MuiInput的全局样式：

const theme = createTheme({
  components: {
    MuiInput: {
      styleOverrides: {
        root: {
          background: '#fff',
        },
      },
    },
  },
});

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