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

Can't customize style #1842

Open
verbeckii opened this issue Jan 19, 2022 · 11 comments
Open

Can't customize style #1842

verbeckii opened this issue Jan 19, 2022 · 11 comments

Comments

@verbeckii
Copy link

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
Copy link
Author

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
Copy link

danieljmann96 commented Jan 29, 2022

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
Copy link
Contributor

ashfaqnisar commented Feb 17, 2022

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
Copy link

jcgentr commented Feb 18, 2022

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
Copy link
Contributor

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

@jcgentr
Copy link

jcgentr commented Feb 18, 2022

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

@Shmulyitz
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;

@matsuu2tatsuya
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)

styleOverrides
It was working fine until February 19.

@jcgentr
Copy link

jcgentr commented Feb 23, 2022

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
Copy link
Contributor

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

@garronej
Copy link
Contributor

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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants