将 Material Ui class names 替换或添加到 React Data Table Component class names

Question

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

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

<div class="rdt_TableCell"/>

应该是

<div class="rdt_TableCell MuiTableCell"/>

link 提到的功能：

可以玩的一些基本沙箱：

Answer 1

react-data-table组件库目前不提供any way to customize a cell's classname。当它指的是使用样式化组件覆盖 CSS 时，它意味着类似以下的方法：

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

这让您可以自定义与 rdt_TableCell class 关联的 CSS 属性，但不会为您提供任何利用 Material-UI TableCell styles 除了复制它们。

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