React MUI V5 AppBar 背景颜色不改变

Question

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”进行样式设计，但它似乎无法更改应用程序栏的背景颜色。应用栏是 v5（最新版本）的 mui 组件。我不知道为什么它没有改变。我是 MUI 新手。请有人帮助我。

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

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

Answer 1

这是最新的 MUI v5 中的内容。

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

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

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

  document.getElementById("root")
);

然后它就会起作用。