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"但是改变appbar的背景颜色似乎不起作用。应用程序栏是多组件从v5(最新版本)。我不知道为什么它没有改变。我是MUI的新人。谁来帮帮我。

我可以使用inline "style"它是这样工作的。但是我需要使用makeStyles方法。

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

Answer 1

这是最新的MUI v5。

问题是@mui/styles与React不兼容。StrictMode或React 18。所以，我们需要包裹根目录"应用"在index.js文件中用"StyledEngineProvider">

import { StyledEngineProvider } from "@mui/material/styles";
ReactDOM.render(
<StyledEngineProvider injectFirst>
<App />
</StyledEngineProvider>,
document.getElementById("root")
);

那么它将工作。

Answer 2

@mui/styles与React不兼容。StrictMode(在index.js中)或React 18。请尝试删除React。首先是StrictMode，然后再尝试。或者第二个选择是像这样尝试:

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