Can't customize style

[verbeckii]

Expected Behavior

I'm trying to customize my table by this docs but it's no effect
I'm also doing research but can find examples of how to do custom style with older version material UI (v4) but I'm using v5
Is it work for material 5+?

Current Behavior

I use material v5 so I did their Theme import :
import { ThemeProvider } from "@mui/styles"; import { createTheme } from "@mui/material/styles";
and do my styling

    const getMuiTheme = () => createTheme({
      overrides: {
        MUIDataTableBodyCell: {
          root: {
            backgroundColor: "#FF0000",
          },
        },
        MUIDataTablePagination: {
          root: {
            backgroundColor: "#000",
            color: "#fff",
          },
        },
        MUIDataTableBodyCell: {
          root: {
            backgroundColor: "#000000"
          }
        }
      },
    });

My table style didn't change with no any errors

Steps to Reproduce (for bugs)

Please look at my codesandbox
https://codesandbox.io/s/mui-datatables-custom-style-o7v2s?file=/src/App.js

Your Environment

Tech	Version
Material-UI	5.2
MUI-datatables	4.0.0
React	17.2
browser	Chrome latest
etc

[verbeckii]

If I downgrade mui-datatables to 3.8.2 and install material-ui/core v.4.12.3 then styles start works

Please see
https://codesandbox.io/s/great-field-nwgqw?file=/src/App.js

It seems like changing styles don't work for mui-datatables v 4.0 ...
Can anyone confirm that?

[danieljmann96]

I am also experiencing this issue, I used the style editing to add a custom button to the toolbar like this. I migrated to MUI 5 and this is the code I tried to use

export const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: { main: '#7986cb', contrastText: '#212121' }
  },
  components: {
    MuiLink: {
      styleOverrides: {
        root: {
          color: '#7986cb'
        }
      }
    },
    MUIDataTableToolbar: {
      styleOverrides: {
        actions: {
          display: 'flex',
          flex: 'initial',
          '& > span, & > button': {
            order: 99
          },
          '& > span:last-child, & > button:last-child': {
            order: 1
          },
          '& > span:nth-child(4), & > button:nth-child(4)': {
            order: 2
          }
        }
      }
    }
  }
});

[ashfaqnisar]

In MUI 5, the overrides option in createTheme has been switched to components option and rather than directly overriding the components, you need to have the styleOverrides in the component you want to override.
Before mui 5:
overrides: { MUIDataTableBodyCell: { root: { backgroundColor: "#FF0000" } } }

After mui 5:

components: { MUIDataTableBodyCell: { styleOverrides:{ root: { backgroundColor: "#FF0000" } } } }

For more information read the docs here

[jcgentr]

I've converted to the new mui 5 syntax and it compiles, but I am unable to resolve the TypeScript error: Object literal may only specify known properties, and 'MUIDataTable' does not exist in type 'Components<BaseTheme>.

How do we extend the interface for the ThemeOptions for mui-datatables components?

I've tried using this documentation so far: https://mui.com/customization/theming/#custom-variables

[ashfaqnisar]

Hey @jcgentr, take a look at this #1810. I think this is what you are looking for ?

[jcgentr]

That's exactly what I was looking for, and it works! Thanks!

[Shmulyitz]

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;

[matsuu2tatsuya]

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)

styleOverrides
It was working fine until February 19.

[jcgentr]

I am having the same issue. When trying to upgrade to 4.1.2, the MUIDataTable styles are no longer being overridden by @mui, even after installing tss-react.

I noticed there is now a prefix on the overridden styles.tss-58la38-MUIDataTable-paper, but no styles show up in the chrome dev tools.

[garronej]

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

[garronej]

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.