Replace or add Material Ui class names to React Data Table Component class names

Question

I would like my React Data Table to have Material Ui classes so it can work better with the rest of my App. It was mentioned in the docs that you can override the css with styled components but I have not managed to do that nor found an example.

i would like to add Mui class names to the rtd class names for example:

<div class="rdt_TableCell"/>

should be

<div class="rdt_TableCell MuiTableCell"/>

link to mentioned feature:

https://www.npmjs.com/package/react-data-table-component#css-overrides

some basic sandbox to play around with:

https://codesandbox.io/s/react-data-table-materialui-9iebe

Ryan Cogswell · Accepted Answer · 2020-03-09 19:02:54Z

1

The react-data-table-component library does not currently provide any way to customize a cell's classname. When it refers to overriding CSS using styled-components, it means an approach like the following:

const StyledDataTable = styled(DataTable)`
  & .rdt_TableCell {
    background-color: lightblue;
  }
`;

This lets you customize the CSS properties associated with the rdt_TableCell class, but doesn't give you any easy way to leverage the Material-UI TableCell styles except by copying them.

answered Mar 9, 2020 at 19:02

Ryan Cogswell

81.8k10 gold badges242 silver badges214 bronze badges

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

Collectives™ on Stack Overflow

Replace or add Material Ui class names to React Data Table Component class names

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related