MUI 深色主题未应用于背景答案

【问题标题】：MUI dark theme isn't applied to the backgroundMUI 深色主题未应用于背景
【发布时间】：2018-10-04 20:46:46
【问题描述】：

我有我想要应用 MUI darkBaseTheme 的反应应用程序。没有它，我的应用程序的一部分看起来像这样：

在我将所有 html 内容包装在我的 render() 中之后：

<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
</MuiThemeProvider>

拥有这些进口：

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton'; // add
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';

看起来像这样：

所以它改变了RaisedButtons。我知道它不应该改变 html 的。但是为什么不把背景改暗呢？有没有办法做到这一点，还是我必须在没有 MUI 的情况下手动完成？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

MUI v5 更新

您可以通过设置mode 属性to dark 将背景更改为深色，并包含设置body 元素的backgroundColor 的CssBaseline：

const theme = createTheme({
  palette: {
    mode: 'dark',
  },
});

<ThemeProvider theme={theme}>
  <CssBaseline />
  <Content />
</ThemeProvider>

如果您想为背景使用自定义颜色：

const theme = createTheme({
  palette: {
    background: {
      default: 'gray',
    },
  },
});

【讨论】：

这有帮助。谢谢。我使用的是以前版本中的 type 属性。

【解决方案2】：

我遇到了类似的问题。当我切换到dark 模式时，身体背景没有改变。

解决方案：

将您的CssBaseline 移动到MuiThemeProvider 中。否则当您在主题中使用 dark 时，正文背景不会改变。

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

【讨论】：

【解决方案3】：

您需要在应用程序的根目录中包含<CssBaseline /> 组件，因为这是处理更改主体背景颜色的方法。

Docs

【讨论】：

添加 CSS 基线导致我的应用程序中的所有间距都发生了变化。我的圆圈是没有 CSS 基线的圆圈和带有它的椭圆。有什么解决办法吗？
我喜欢它被埋在Components > Utils，远离任何与样式有关的东西。