Material-table: Including material-table overrides material-ui theme

[sickyoon]

Describe the bug

material-table loads default material-ui styles again overriding theme styles.

To Reproduce

Steps to reproduce the behavior:

1. Create MUI theme and change theme.typography.fontFamily
2. Load theme using MuiThemeProvider
3. Create React page and ensure theme is applied
4. Create React page with MaterialTable
5. Look at developer tools to find typography styles have been overriden.

Expected behavior

Should not have duplicated material-ui style elements after including MaterialTable

Screenshots

Environment

npx create-react-app my-app --typescript

"@material-ui/core": "^4.0.0",
"material-table": "^1.37.0",

[mbrn]

I tested this but i think this is not MT related case. When you use a muithemeprovider it adds styles of every component that used inside.

This is normal you will see two MuiTypography styles.

 <>
        <Typography>Text1</Typography>
        <MuiThemeProvider theme={theme}>
          <Typography>Text2</Typography>
        </MuiThemeProvide>
</>

[zumdahl76]

I have the same issue i'm trying to figure out. when i add the tag in my page, the whole material-ui theme changes. It's the only module that does that. I'll let you know if i find how to fix it. Thanks.

Edit: I noticed this issue does not exists in 1.38.0 so that's what i'm going to roll with. Thanks.

[mbrn]

I will take a look again.

[Clem-]

I'm having the same problem.
After the module is loaded, the MaterialUI theme (eg. button styles) is broken.

PS: I'm using NextJS

[WillemLabu]

I can confirm this happens with .MuiButtonBase-root too.

Is there a way to make your styles more specific at all?

[bilel-noomene]

+1

[ahomatthew]

+1

[ahomatthew]

I had to go back to 1.36.0 to get it to stop behaving this way.

[devopsjosh]

I am having this issue as well. In my case it affected Button styles and Textfield's select options. Both utilized .MuiButtonBase-root. I am using Material UI 4 with ThemeProvider and styled-components.
Downgrading to 1.36 fixed the issue.

[wolfdgreat]

was this fixed? I used 1.57 and having the same issue.

[m3h0w]

Same problem here. Other components that use material UI have their style changed when I include the material-table.

Also fixed by downgrading to 1.36.

I had a problem with editing in 1.36 so I tried 1.52 and it works without overwriting the styles too.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[bishoym]

Issue is persistent on 1.69

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.