自定义Material UI主题不生效 配置背景色后页面仍显示白色

问题原因 #

• 未引入CssBaseline组件：Material UI的palette.background.default配置仅会被CssBaseline全局样式组件读取，用于设置body标签的默认背景色。未引入该组件时，浏览器默认的白色body背景不会被覆盖，导致自定义背景色不生效。
• 根容器自定义样式覆盖：若App组件或应用最外层容器手动设置了backgroundColor样式，优先级高于全局默认背景，会覆盖你配置的主题值。
• 主题Provider层级冲突：如果项目存在多个嵌套的ThemeProvider，内层主题配置会覆盖外层的自定义主题，也会导致配置不生效。

解决方法 #

方案1：引入CssBaseline组件（最常用解决方案） #

在入口文件中导入CssBaseline并放在ThemeProvider内部、App组件外部即可，修改后的index.tsx代码如下：

// index.tsx
import {ThemeProvider, CssBaseline} from '@mui/material/styles';
import {theme} from 'Src/theme';

...

const Root = () => {
  return (
    <ApolloProvider client={client}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <App />
      </ThemeProvider>
    </ApolloProvider>
  );
};

render(<Root />, document.getElementById('root'));

CssBaseline是Material UI提供的全局样式重置组件，会自动将你配置的palette.background.default值应用到body标签上。

方案2：排查覆盖样式 #

检查App组件及所有根层级容器的样式代码，删除手动硬编码的背景色属性，若需要保留背景色设置，可改为从主题读取：

// 示例：在styled组件中使用主题背景色
const AppContainer = styled('div')(({theme}) => ({
  backgroundColor: theme.palette.background.default
}))

方案3：排查ThemeProvider层级 #

检查项目中是否存在其他嵌套的ThemeProvider，确保你的自定义主题所在的ThemeProvider是最外层的，没有被内层的主题配置覆盖。

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