Material-table: loss of style with v4 of the wm material-ui

[Annderson]

all the pages I'm using the material-table. Loses the applied style, mainly those that are in the theme

"dependencies": {
"@material-ui/core": "^4.1.3",
"@material-ui/icons": "^4.2.1",
"@material-ui/styles": "^4.0.0-alpha.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"camelcase-keys": "^5.0.0",
"classnames": "^2.2.6",
"connected-react-router": "^6.3.2",
"history": "^4.9.0",
"leaflet": "^1.5.1",
"lodash": "^4.17.11",
"material-table": "1.37.0",
"moment": "^2.24.0",
"query-string": "^6.5.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-leaflet": "^2.3.0",
"react-notification-system-redux": "^2.0.0",
"react-redux": "^6.0.1",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
"recharts": "^1.5.0",
"recompose": "0.30.0",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^5.10.0",
"redux-saga": "^1.0.2",
"snakecase-keys": "^2.1.0",
"typeface-roboto": "^0.0.54",
"urijs": "^1.19.1",
"validator": "^10.11.0"
},

[json2d]

same

    "@material-ui/core": "4.1.3",
    "material-table": "1.40.0",

any hints on better working versions?

[masagameplay]

The issue is probably coming from an old Material UI version in the package.json (https://github.com/mbrn/material-table/blob/master/package.json#L75). It seems like the other packages are very outdated too.

[json2d]

[email protected] is the last version before they upgraded to @material-ui/core@v4, so downgrading to that might work
https://github.com/mbrn/material-table/blob/v1.36.6/package.json#L75

Also shouldnt @material-ui/core be a peer dependency?

[json2d]

yep, downgrading to [email protected] and @material-ui/[email protected] seems to have worked for me - the style loss/bug i was experiencing is gone

[Annderson]

Yes, before v4 of material-ui worked, but I need to use v4

[Annderson]

I was able to solve the problem by making the material-ui / core and material-ui / styles get the same version as in the material-table

[tlambert03]

just stumbled across this myself...
as an alternative workaround for those who don't want to change @material-ui/core or @material-ui/styles versions to exactly match material-table, you can provide icons directly as described https://material-table.com/#/docs/all-props:

import React from "react"
import MaterialTable from "material-table"
import FirstPage from "@material-ui/icons/FirstPage"
import PreviousPage from "@material-ui/icons/ChevronLeft"
import NextPage from "@material-ui/icons/ChevronRight"
import LastPage from "@material-ui/icons/LastPage"
import Search from "@material-ui/icons/Search"
import ResetSearch from "@material-ui/icons/Clear"

const Component = () => (
  <MaterialTable
    icons={{ FirstPage, PreviousPage, NextPage, LastPage, Search, ResetSearch }}
  />
)