reactjs MUI深色主题未应用于背景

ebdffaop 于 2023-03-01 发布在 React

关注(0)|答案(5)|浏览(123)

我有一个react应用程序，我想在其中应用MUI darkBaseTheme。如果没有它，我的应用程序的一部分看起来像这样：

在render()中封装了所有html内容之后：

<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

来源：https://stackoverflow.com/questions/50004235/mui-dark-theme-isnt-applied-to-the-background

5条答案

按热度按时间

cedebl8k1#

您需要在应用的根目录中包含<CssBaseline />组件，因为它负责更改主体的背景颜色。
文件

赞(0）回复(0）举报 2023-03-01

vwoqyblh2#

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

- 解决方案：**

将您的CssBaseline移到MuiThemeProvider内。否则当您在主题中使用类型dark时，主体背景不会改变。

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

赞(0）回复(0）举报 2023-03-01

46scxncf3#

- MUI第5版更新**

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

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

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

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

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

赞(0）回复(0）举报 2023-03-01

fdx2calv4#

Guys dark模式无法正常工作。您必须导入正确的语法，即

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

当你期望程序自动导入时，它导入错误了。

赞(0）回复(0）举报 2023-03-01

omvjsjqw5#

在我的例子中，导入<CssBaseline />.时出现了问题
我是这么做的：

import CssBaseline from "@mui/material";

但解决方案是这样导入的：

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

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs MUI深色主题未应用于背景

5条答案

相关问题

热门标签

最新问答