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