无法覆盖 AppBar 背景颜色答案

【问题标题】：Can't override AppBar background color无法覆盖 AppBar 背景颜色
【发布时间】：2022-01-23 12:21:37
【问题描述】：

有人可以帮我解决这个问题吗？这是代码：

import { AppBar } from "@mui/material";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
    root: {
        backgroundColor: 'red'
    }
})

const App = () => {
    const classes = useStyles();

    return <>
        <AppBar className={classes.root}>
            test
        </AppBar>
        <h1 className={classes.root}>test</h1>
    </>
}

export default App;

问题是：为什么 AppBar 组件的背景颜色没有改变； h1标签思想没问题；我发现的另一个问题是，有时它会发生变化，但是当我刷新页面时，它默认变为蓝色 -> 颜色；所以，如果有的话，非常感谢你的回答:);

【问题讨论】：

这很好用。你怎么了？
我不知道。它对我不起作用。可能是我想念某些东西，图书馆或其他东西。我敢肯定，它应该可以工作，但事实并非如此。这就是我想要找出的。如果您有任何建议，请。谢谢。
您没有收到任何错误信息吗？有没有安装@mui/styles 依赖？
很遗憾，没有收到任何消息。以下是所有依赖项的列表： "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mui/icons-material": "^5.2.4 ", "@mui/material": "^5.2.3","@mui/styles": "^5.2.3", "@testing-library/jest-dom": "^5.16.1", "@ testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "react": "^17.0.2", "react-dom": " ^17.0.2”、“react-router-dom”：“^6.1.0”、“react-scripts”：“4.0.3”、“web-vitals”：“^1.1.2”
您的 ThemeProvider 和客户主题在哪里？

标签： reactjs material-ui

【解决方案1】：

  <AppBar className={classes.root}>
      test
   </AppBar>

而是将您的文本包装在一个 div 中并在该 div 上使用 className

<AppBar >
  <div className={classes.root}>
    test
  </div>
</AppBar>

【讨论】：

谢谢你的回答，但是我想覆盖AppBar规则，是这样吗？
你可以改变它的.css-11b3ww9-MuiPaper-root-MuiAppBar-root { background-color: "your-color" }