Mui v5 styleOverrides 不适用于主题

Question

我正在尝试使用此处文档中所述的主题覆盖设置样式：

我有以下代码沙箱：

import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Select from '@mui/material/Select'
import MenuItem from '@mui/material/MenuItem'

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

export default function GlobalThemeOverride() {
  return (
    <ThemeProvider theme={theme}>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            variant="standard"
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
    </ThemeProvider>
  );
}

选择框的背景应该是#fff但是根本没有设置背景。 :(

Answer 1

这对我来说看起来像是一个错误（或者至少缺少开发人员期望存在的合理功能）。 问题是 Select 没有在根级别定义它自己的任何样式，因此它没有利用代码（这将是对 MUI styled的调用，例如此处为select类）来处理查找在主题并应用相应的样式覆盖。 我建议记录一个问题。

有几种可能的解决方法。

解决方法 1 - 以select CSS 类为目标

这种方法可能有效，但这取决于您要尝试做什么，因为它针对的是根元素的子元素。

const theme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        select: {
          backgroundColor: "#000",
          color: "#fff"
        }
      }
    }
  }
});

解决方法 2 - 以MuiInput-root CSS 类为目标

下面的方法通过利用MuiInput-root （当变体为“标准”时将 Select 的根元素的呈现委托给Input组件）来MuiInput-root与MuiSelect-root相同的元素，然后通过"&.MuiSelect-root" ，因此它只影响Select而不是所有输入。

const theme = createTheme({
  components: {
    MuiInput: {
      styleOverrides: {
        root: {
          "&.MuiSelect-root": {
            backgroundColor: "#000",
            color: "#fff"
          }
        }
      }
    }
  }
});