Material-UI@Next自定义主题背景色未生效问题求助

我来帮你排查下背景色没生效的原因，一步步来解决：

1. 先检查依赖与导入是否正确 #

首先得确认你已经把需要的模块都正确导入了，比如createMuiTheme、createPalette还有你用到的颜色常量（比如代码里的purple）：

import { createMuiTheme, createPalette } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';

要是漏了导入，配置再对也不会生效哦。

2. 确认主题包裹的范围是否正确 #

你用<MuiThemeProvider>包裹组件的思路是对的，但一定要确保它包裹了整个应用的根组件，比如：

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

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      {/* 所有页面和组件都要放在这个里面 */}
      <YourRootComponent />
    </MuiThemeProvider>
  );
}

要是只包裹了部分组件，没被包裹的区域还是会用默认主题的样式。

3. 给全局容器/body应用主题背景色 #

Material-UI的组件（比如Paper、Container）会自动用background.default的值，但原生的<body>标签不会自动继承主题色，这时候得手动设置：
最简单的方法是用Material-UI自带的CssBaseline组件，它会重置全局样式并自动把body的背景色设为你配置的background.default：

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

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline /> {/* 加这个就搞定全局背景色了 */}
      <YourRootComponent />
    </MuiThemeProvider>
  );
}

要是不想用CssBaseline，也可以自己写全局样式：

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

const useStyles = makeStyles((theme) => ({
  appRoot: {
    backgroundColor: theme.palette.background.default,
    margin: 0,
    minHeight: '100vh',
  },
}));

// 根组件里用这个样式
function App() {
  const classes = useStyles();
  return (
    <MuiThemeProvider theme={theme}>
      <div className={classes.appRoot}>
        {/* 你的内容 */}
      </div>
    </MuiThemeProvider>
  );
}

这一步是关键，很多时候背景色不生效就是因为没给全局容器应用主题里的颜色值。

4. 检查主题配置的细节 #

你的主题配置基本没问题，不过注意你代码里写的是#303030（深灰色），但你说预期是红色，是不是笔误啦？改成红色的hex值（比如#ff0000）或者用Material-UI的颜色常量就行：

import red from '@material-ui/core/colors/red';

const theme = createMuiTheme({
  palette: createPalette({
    type: 'light',
    primary: purple,
    background: {
      default: red[500], // 用官方的红色500色调
    },
  }),
});

5. 最后试试清除缓存重启项目 #

有时候浏览器缓存或者开发服务器缓存会导致样式不更新，清一下浏览器缓存，或者重启你的React开发服务器，确保新的主题配置被正确加载。

按照上面的步骤排查，应该就能解决背景色不生效的问题啦！

内容的提问来源于stack exchange，提问作者Gerard López Sorribas