将 Material Ui 类名替换或添加到 React 数据表组件类名答案

【问题标题】：Replace or add Material Ui class names to React Data Table Component class names将 Material Ui 类名替换或添加到 React 数据表组件类名
【发布时间】：2020-06-21 14:45:14
【问题描述】：

我希望我的 React 数据表具有 Material Ui 类，以便它可以更好地与我的应用程序的其余部分一起工作。文档中提到您可以使用样式组件覆盖 css，但我没有设法做到这一点，也没有找到示例。

我想将 Mui 类名添加到 rtd 类名中，例如：

<div class="rdt_TableCell"/>

应该是

<div class="rdt_TableCell MuiTableCell"/>

链接到提到的功能：

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

一些基本的沙盒可以玩：

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

【问题讨论】：

标签： reactjs material-ui react-data-table-component

【解决方案1】：

react-data-table-component 库目前不提供any way to customize a cell's classname。当它提到使用 styled-components 覆盖 CSS 时，它意味着类似以下的方法：

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

这使您可以自定义与 rdt_TableCell 类关联的 CSS 属性，但除了复制它们之外，没有提供任何简单的方法来利用 Material-UI TableCell styles。

【讨论】：