关于reactjs：通过材料表更改添加组件Material-UI AppBar样式

Adding component with material-table changes Material-UI AppBar style

我的应用程序正在使用Material-UI和material-table。使用" ThemeProvider"将全局主题应用于" index.js"文件中，然后将其作为子主题：

1
2
3
4
5
6
7
8

该组件将具有带物料表的组件。当我添加表格组件并查看该页面时，AppBar会放松一些样式，例如Pofile和注销(https://material-ui.com/components/app-bar/#app-bar-with-menu)的下拉按钮中的背景颜色和对齐方式。我不知道为什么会这样。

在更改了AppBar样式的页面上浏览CSS，我看到.MuiPaper-root是在.MuiAppBar-colorPrimary之前导入的，因此会覆盖样式，但是仍然不确定为什么要添加带有" material-table"的组件导致这种情况发生。

我的应用依赖项为：

1
2
3
4
5
6
7
8
9
10
11
12
13

"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"的两个不同版本，但不确定如何解决。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

"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",
...

通过找到其他一些帖子1和2，我试图将我的material-ui / core和material-ui / icons版本降级为4.0.1版(与material-table所用的版本相同)并且有效。 >

有关详细信息：

1
2
3
4
5

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

npm install @material-ui/[email protected]
npm install @material-ui/[email protected]