Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

> **I tryed styling the Mui dataTable like you suggested and it still isn't working** #1878

matsuu2tatsuya opened this issue Mar 2, 2022 · 6 comments · Fixed by #1882


Copy link

I tryed styling the Mui dataTable like you suggested and it still isn't working

Here is my code

import MUIDataTable from "mui-datatables"; import { createTheme, ThemeProvider } from "@mui/material/styles";

function Customers() { const columns = ["Name", "Company", "City", "State"];

const data = [ ["Joe James", "Test Corp", "Yonkers", "NY"], ["John Walsh", "Test Corp", "Hartford", "CT"], ["Bob Herm", "Test Corp", "Tampa", "FL"], ["James Houston", "Test Corp", "Dallas", "TX"], ["James Houston", "Test Corp", "Dallas", "TX"], ];

const options = { filterType: "multiselect", responsive: "scroll", };

return ( <ThemeProvider theme={createTheme({ components: { MUIDataTableBodyCell: { styleOverrides: { root: { backgroundColor: "#FF0000", }, }, }, }, })} > <MUIDataTable sx={{ height: "100px" }} title={"Customers"} data={data} columns={columns} options={options} /> ); }

export default Customers;

I'm running into a similar problem.

It appears that I can override the Style of an existing mui Component, but the Style is not reflected in the mui-datatables.

[ style overrides ]
ok => MuiTableRow, MuiTableCell, ...etc (mui official className)
failed => MUIDataTableHeadCell, MUIDataTableHeadRow, ...etc (mui-datatable className)

It was working fine until February 19.

Originally posted by @matsuu2tatsuya in #1842 (comment)

Copy link

kkaplita commented Mar 4, 2022

Any solutions?

Copy link

kachmul2004 commented Mar 8, 2022

Seems I'm also not able to style this MUI-datables using mui 5.5.0 themes.

Copy link

StefanIgnjatovic12 commented Mar 18, 2022

Anyone else still having this issue? Tried the override as in #162 but it's not working

export const getMuiTheme = () =>
        overrides: {
            MUIDataTableHeadCell: {
                fixedHeaderCommon: {
                    backgroundColor: "blue"

I'm actually just trying to make the column label bold but I can't get any changes to apply

Copy link

kachmul2004 commented Mar 19, 2022

@StefanIgnjatovic12 just downgrade mui-datatables to 4.0.0. That's the only thing that seemed to work for me

Copy link

It's fixed in the PR #1882. It just needs to get merged.

Copy link

garronej commented Apr 3, 2022

Seems like this project is no longer actively maintained...
A workaround that I can offer (to yarn users) is to pin tss-react to the newer version in your package.json like so:

"resolutions": {
    "tss-react": "3.6.0"
"dependencies": {
    "tss-react": "^3.6.0"

Once the PR get merged you will be able to remove tss-react from your dependencies.

federi95 pushed a commit to federi95/mui-datatables that referenced this issue Dec 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging a pull request may close this issue.

5 participants