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

Question

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>

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.

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.

My app dependencies are:

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

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

tw1742 tw1742 · Accepted Answer · 2019-07-25T16:32:18

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.

For full details:

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

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

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

1 Answers