添加具有材料表更改的组件Material-UI AppBar样式 [英] Adding component with material-table changes Material-UI AppBar style
问题描述
我的应用程序正在使用Material-UI和 material-table .使用"ThemeProvider"将全局主题应用于"index.js"文件中,然后将其作为子主题:
My app is using Material-UI and material-table. A global theme is applied in the "index.js" file using "ThemeProvider" with as a child and then has children:
<Fragment>
<CssBaseline />
<MenuAppBar />
<main className={classes.main}>
<Route path="/" exact component={Home} />
<Route path="/login" component={Login}></Route>
</main>
</Fragment>
该组件将具有带物料表的组件.当我添加表格组件并查看该页面时,AppBar会放松一些样式,例如Pofile和登出( https://material-ui.com/components/app-bar/#app-bar-with-menu ).我不知道为什么会这样.
The component then has the component with the material-table. When I add in the table component and view that page the AppBar looses some of it's styling, e.g. background color and alignment in the dropdown buttons for Pofile and Logout (https://material-ui.com/components/app-bar/#app-bar-with-menu). I'm puzzled why this happens.
在更改了AppBar样式的页面上浏览CSS,我看到.MuiPaper-root
在.MuiAppBar-colorPrimary
之前导入,因此覆盖了样式,但是仍然不确定为什么要添加带有"material-table"的组件导致这种情况发生.
Digging into the CSS, on the page where the AppBar style is changed I see that .MuiPaper-root
is imported before .MuiAppBar-colorPrimary
and therefore overrides the style, but still not sure why adding the component with the "material-table" causes this to happen.
我的应用依赖项是:
"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"的两个不同版本,但不确定如何解决.
I also see that "material-table" lists two different versions of "material-ui/core", but not sure how to resolve that.
"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",
...
推荐答案
通过查找其他一些帖子 2 我试图将我的material-ui/core和material-ui/icons版本降级为4.0.1版本(与material-table相同).
Through finding a few other posts 1 and 2 I tried to downgrade my versions of material-ui/core and material-ui/icons to version 4.0.1 (the same used by material-table) and that worked.
有关详细信息:
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
这篇关于添加具有材料表更改的组件Material-UI AppBar样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!