自定义主题背景颜色

Question

我已安装material-ui@next并希望自定义主题的背景颜色。 我尝试过这样做：

const theme = createMuiTheme({
  palette: createPalette({
    type: 'light',
    primary: purple,
    background: {
      default: '#303030',
    },
  }),
});

并且这个。

<MuiThemeProvider theme={theme}>

但是背景颜色仍然是白色，而应该更改为红色。

- Gerard López Sorribas

Answer 1

我也遇到了这个问题。为了解决它，导入CssBaseline：

import CssBaseline from '@mui/material/CssBaseline';

然后像这样添加：

<MuiThemeProvider theme={theme}>
    <CssBaseline />

使用CssBaseline时，按照以下方式设置背景颜色会应用该颜色：

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

const theme = createMuiTheme({
  palette: {
    background: {
      default: "#303030"
    }
  }
});

你可以在这里找到一个有效的代码片段。

- knro

---

修正后就会显而易见，但这是一个容易犯的简单错误。CssBaseline需要访问主题来获取背景颜色，并且必须是子元素才能访问到它。 - user9903