时间戳

首页 > 解决方案 > 将 Material Ui 类名替换或添加到 React 数据表组件类名

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

问题描述

我希望我的 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

标签： reactjsmaterial-uireact-data-table-component

解决方案

react-data-table-component 库目前不提供任何方法来自定义单元格的 classname。当它提到使用 styled-components 覆盖 CSS 时，它意味着类似以下的方法：

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

编辑 React 数据表 MaterialUI

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

推荐阅读