添加带有材质表的组件更改 Material-UI AppBar 样式

Posted 2023-02-22

【中文标题】添加带有材质表的组件更改 Material-UI AppBar 样式

【英文标题】：Adding component with material-table changes Material-UI AppBar style

【发布时间】：2019-12-03 21:01:08

【问题描述】：

我的应用正在使用 Material-UI 和 material-table。使用“ThemeProvider”在“index.js”文件中应用一个全局主题，并作为一个子项，然后有子项：

<Fragment>
    <CssBaseline />
    <MenuAppBar />
    <main className=classes.main>
      <Route path="/" exact component=Home />
      <Route path="/login" component=Login></Route>
    </main>
</Fragment>

然后组件具有带有材料表的组件。当我添加表格组件并查看该页面时，AppBar 会丢失一些样式，例如Pofile 和 Logout (https://material-ui.com/components/app-bar/#app-bar-with-menu) 下拉按钮中的背景颜色和对齐方式。我很困惑为什么会这样。

深入研究 CSS，在更改 AppBar 样式的页面上，我看到 .MuiPaper-root 在 .MuiAppBar-colorPrimary 之前导入，因此会覆盖样式，但仍然不确定为什么要添加带有“材质表”的组件导致这种情况发生。

我的应用依赖项是：

"dependencies": 
    "@material-ui/core": "^4.2.1",
    "@material-ui/icons": "^4.2.1",
    "axios": "^0.19.0",
    "jwt-decode": "^2.2.0",
    "material-table": "^1.40.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "react-svg": "^10.0.11"
  ,

我还看到“material-table”列出了“material-ui/core”的两个不同版本，但不知道如何解决。

"material-table": 
      "version": "1.40.1",
      "resolved": "https://registry.npmjs.org/material-table/-/material-table-1.40.1.tgz",
      "integrity": "sha512-rZuGhNpXFzROlqJUVLH+E5yzt9MxaYVZfDNuHWtM9EWlbUGQJWuGQNcsSmdr0XeTCZkQvVnZYbEkRcUu+71rfQ==",
      "requires": 
        "@date-io/date-fns": "^1.1.0",
        "@material-ui/core": "^4.0.1",
        "@material-ui/pickers": "^3.0.0",
        "classnames": "^2.2.6",
        "date-fns": "^2.0.0-alpha.27",
        "debounce": "^1.2.0",
        "filefy": "0.1.9",
        "prop-types": "^15.6.2",
        "react-beautiful-dnd": "11.0.3",
        "react-double-scrollbar": "0.0.15"
      ,
      "dependencies": 
        "@material-ui/core": 
          "version": "4.2.1",
    ...

【问题讨论】：

我有同样的问题，我认为 Material UI 已经捆绑了两次。参见这里，***.com/questions/56794892/…

【参考方案1】：

通过找到其他一些帖子 1 和 2 我尝试将我的 material-ui/core 和 material-ui/icons 版本降级到版本 4.0.1（与 material-table 使用的相同）并且工作。

详细信息：

npm uninstall @material-ui/core
npm uninstall @material-ui/icons

npm install @material-ui/core@4.0.1
npm install @material-ui/icons@4.0.1