react mui-datatables 4, can't customize style

Question

I'm using "mui-datatables": "^4.2.2", "@mui/material": "^5.6.1", i tried to customize style like this :

// MUI DATATABLES

import MUIDataTable from "mui-datatables";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

const options = {
  filter: false,
  filterType: "checkbox",
  download: true,
  sort: false,
  responsive: "vertical", // standard | vertical | simple
  selectableRows: "multiple",
  selectableRowsOnClick: false,
  print: true,
  viewColumns: false,
  searchOpen: false,
  search: true,
  page: 0,
  pageSize: 10,
  // rowsPerPage: 10,
  rowsPerPageOptions: [],
  textLabels: {
    body: {
      noMatch: "Aucun enregistrement correspondant trouvé",
    },
    pagination: {
      next: "Suivant",
      previous: "Pr&eacute;c&eacute;dent",
      rowsPerPage: "Rows per page:",
      displayRows: "sur",
    },
    toolbar: {
      search: "Recherche",
      downloadCsv: "Télécharger CSV",
      print: "Imprimer",
      viewColumns: "Afficher les colonnes",
      filterTable: "Tableau de filtrage",
    },
    selectedRows: {
      text: "ligne(s) sélectionnée(s)",
      delete: "Supprimer",
      deleteAria: "Supprimer les lignes sélectionnées",
    },
  },
  customToolbarSelect: (selectedRows) => console.log(selectedRows),
};

const muiCache = createCache({
  key: "mui",
  prepend: true,
});

const getMuiTheme = () =>
  createTheme({
    components: {
      MUIDataTableBodyCell: {
        styleOverrides: {
          root: {
            backgroundColor: "#000000",
          },
        },
      },
    },
  });

and then inside the react function component i return :

 <CacheProvider value={muiCache}>
              <ThemeProvider theme={getMuiTheme}>
                <MUIDataTable
                  title={"Accueil"}
                  data={data}
                  columns={columns}
                  options={options}
                />
              </ThemeProvider>
            </CacheProvider>

I should have a dark body cell, but nothing is changed

How can i fix this issuer ? Thanks

Yury Melnikau · Accepted Answer · 2022-07-14 14:21:28Z

4

This is the solution to the problem:

"mui-datatables": "^4.2.2" "@mui/material": "^5.9.0"

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

const XTable = ({columns, header, data}) => {

  const getMuiTheme = () =>
    createTheme({
      components: {
        MuiTableCell: {
          styleOverrides:{ root: {
            padding: '8px',
            backgroundColor: '#CDCAC6',
          }}
        },
        MuiToolbar: {
          styleOverrides:{regular: {
            minHeight: '8px',
          }}
        }
      }
    });

  return(
      <ThemeProvider theme={getMuiTheme()}>
            <MUIDataTable 
              title={header} 
              data={data} 
              columns={columns} 
              options={options} 
            />
      </ThemeProvider>
    );
} 

export default XTable;

answered Jul 14, 2022 at 14:21

Yury Melnikau

562 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ahuemmer Over a year ago

Welcome to SO! Please don't post code-only answers but add a little textual explanation about how and why it works and what makes it different from the other answers given. You may also have a look at our "How to write a good answer" entry.

Yury Melnikau · Accepted Answer · 2022-07-14 12:00:59Z

0

me helped only downgrading to "3.8.5"

answered Jul 14, 2022 at 12:00

Yury Melnikau

562 bronze badges

2 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Tom Over a year ago

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review

Collectives™ on Stack Overflow

react mui-datatables 4, can't customize style

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related