Components Overrides not working in MUI 5

[kkaplita]

Components Overrides not working i MUI 5

Expected Behavior

Overrides should work (but defined in theme)

Current Behavior

Overrides in MUI 5 not working.

Tech	Version
Material-UI	5.3.0
MUI-datatables	4.1.2
React	17.0.2
browser	any

[Simrut]

I have the same problem, downgraded MUI to v4 for now and used such an overrideconst getMuiTheme = () => createMuiTheme({ overrides: { MUIDataTable: { root: { backgroundColor: "#FF000", }, }, MUIDataTableBodyCell: { root: { width: "200px", }, }, }, });
This is deprecated however

[kkaplita]

I have the same problem, downgraded MUI to v4 for now and used such an overrideconst getMuiTheme = () => createMuiTheme({ overrides: { MUIDataTable: { root: { backgroundColor: "#FF000", }, }, MUIDataTableBodyCell: { root: { width: "200px", }, }, }, }); This is deprecated however

you should use this way... components: { MUIDataTable: styleOverrides { root: { backgroundColor: "#FF000", }, }, }, but... there is some issue and not working

[macadiz]

I'm having the same issue. I think it must be related to the CSS class generation. If you inspect the DOM elements you won't see any class plain as MUIDataTableBodyCell-root, in this picture you can see tss-1qtl85h-MUIDataTableBodyCell-root.

[GabrielPRomero]

Hey, if you using css or styled components. You can try this, example if it is a div:

Styled component:
const StyledDataTable = styled(MUIDataTable)({ '& div[class*="MUIDataTableFilterList-root"]': { maxHeight: none, // add your style }, });

css:
div[class*="MUIDataTableFilterList-root"]': {
maxHeight: none,
// add your style
},

[ashfaqnisar]

Hey @kkaplita, this issue has been fixed in the newest release 4.2.2 with this #1882 pr. Please take a look whether this version fixed you're issue.

[FlaviusBejan]

In my case when the table is rendered, the CSS is injected above the one for all the components. This breaks everything.
I've hidden the data showed on the rows and in the table.

[FlaviusBejan]

I'm not sure if this is related to the problem.
I've changed from the latest @emotion/styled 11.8.1 to 11.6.0 and the problem was solved.
I don't know how and why, but all the other mui components worked fine with 11.8.1 and only when the table was rendered everything was broken.
I've realized this when trying to do a demo in CodeSandbox. which failed with (0 , $csb___emotion_utils.registerStyles) is not a function. Changing to 11.6.0 removed the problem.
https://codesandbox.io/s/silly-goldstine-4lgfwi?file=/package.json
The solution was found here: mui/material-ui#31149