React项目使用MUI时CssBaseline覆盖主题背景色失效如何解决？

问题根因 #

你使用的overrides配置属于Material UI v4的语法规范，若当前使用v5及以上版本，该配置项已被废弃，同时组件配置前缀需要添加Mui标识，此外如果<CssBaseline/>未放置在ThemeProvider内部，也无法读取自定义主题配置。

对应解决方案 #

1. 适用MUI v5/v6（当前主流版本）

• 调整主题配置如下：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          backgroundColor: '#1f262a',
        }
      }
    }
  }
});

• 确保组件层级正确，<CssBaseline/>必须放在ThemeProvider内部：

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* 其余业务组件 */}
    </ThemeProvider>
  );
}

2. 适用MUI v4

若仍使用v4版本，可在原有配置基础上添加!important提高样式优先级，同时确认<CssBaseline/>在ThemeProvider内部：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    CssBaseline: {
      "@global": {
        body: {
          backgroundColor: "#1f262a !important",
        }
      }
    }
  },
});

3. 快速兜底方案

无需修改主题配置，直接在index.css中提高body样式优先级即可覆盖CssBaseline默认样式：

body {
  background-color: #1f262a !important;
}

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