CODEWITHSUNDEEP
reactjsmaterial-uireact-data-table-component
Jordan
Jordan

Reputation: 175

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

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

Upvotes: 2

Views: 2027

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81026

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;
  }
`;

Edit React Data Table MaterialUI

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.

Upvotes: 1

Related Questions