Mui v5 styleOverrides 不适用于主题

Question

我正在尝试使用 documentation here:

中列出的主题覆盖来设置样式

我有以下代码sandbox:

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>
  );
}

Select 框应具有 #fff 背景，但根本没有设置任何背景。 :(

Answer 1

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

有几个可能的解决方法。

解决方法 1 - 针对 selectCSSclass

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

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

解决方法 2 - 以 MuiInput-root CSS class

为目标

下面的方法通过利用 MuiInput-root 以与 MuiSelect-root 相同的元素为目标（Select 的根元素的呈现是 delegated to the Input component，当变体是 " standard")，然后通过 "&.MuiSelect-root" 对其进行限定，使其仅影响 Select 而不是所有输入。

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