Material-ui黑暗主题不适用于背景

Question

我有我的反应应用程序,我想应用Material-ui 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.但为什么不把背景变为黑暗呢？有没有办法做到这一点,或者我必须手动完成没有材料-ui？

Answer 1

MUI v5 更新

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

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

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

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

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

Answer 2

您需要<CssBaseline />在应用程序的根目录中包含该组件,因为这是处理更改正文背景颜色的内容.

文件

Answer 3

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

解：

CssBaseline向内移动MuiThemeProvider。否则，当您dark在主题中使用输入时，主体背景不会改变。

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