React MUI V5 AppBar背景颜色不变答案

【问题标题】：React MUI V5 AppBar Background color not changingReact MUI V5 AppBar背景颜色不变
【发布时间】：2021-11-18 05:51:11
【问题描述】：

import React from "react";
import {
  AppBar,
  Toolbar,
  Grid,
  IconButton,
  InputBase,
  Badge,
} from "@mui/material";
import {
  ChatBubbleOutline,
  NotificationsNone,
  PowerSettingsNew,
} from "@mui/icons-material";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  root: {
    backgroundColor: "#fff",
  },
});

const Header = () => {
  const classes = useStyles();
  return (
    <AppBar position="static" className={classes.root}>
      <Toolbar>
        <Grid container>
          <Grid item>
            <InputBase />
          </Grid>
          <Grid item sm>
            helo
          </Grid>
          <Grid item>
            <IconButton>
              <Badge badgeContent={4} color="secondary">
                <NotificationsNone />
              </Badge>
            </IconButton>
            <IconButton>
              <Badge badgeContent={3} color="primary">
                <ChatBubbleOutline />
              </Badge>
            </IconButton>
            <IconButton>
              <PowerSettingsNew />
            </IconButton>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

我正在使用“makeStyles”进行样式设置，但它似乎无法更改 appbar 的背景颜色。应用栏是来自 v5（最新版本）的 mui 组件。我不知道为什么它没有改变。我是 MUI 的新手。有人请帮帮我。

我可以使用内联“样式”及其以这种方式工作。但我需要使用 makeStyles 方法。

注意：我使用的是最新版本的 mui，但我不知道为什么它没有改变。

【问题讨论】：

请不要在图片中提供您的代码。而是使用 cmets 发布您的代码。
是的。请现在通过它。
添加className时尝试在Appbar中传递variant=“inherit”

标签： reactjs material-ui

【解决方案1】：

这是最新的 MUI v5。

问题在于 @mui/styles 与 React.StrictMode 或 React 18 不兼容。 因此，我们需要在 index.js 文件中包装我们的根“App”组件，其中 “StyledEngineProvider” 并将 injectFirst 设置为 True。

import { StyledEngineProvider } from "@mui/material/styles";

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <App />
  </StyledEngineProvider>,

  document.getElementById("root")
);

然后就可以了。

【讨论】：

【解决方案2】：

@mui/styles 与 React.StrictMode（在 index.js 中）或 React 18 不兼容。请先尝试删除 React.StrictMode，然后再尝试。或者第二种选择是这样尝试：

<AppBar position="static" style={{backgroundColor: '#fff'}}>

【讨论】：

嗨 Ahmad，是的，这是严格模式的问题。由于@mui/styles 不兼容。删除它似乎不起作用，但我用 StyledEnginerProvider 包装了根组件 App 并将 injectFirst 设置为 true 然后它正在工作。谢谢你的评论