我如何设置 React-Table 的样式？

Posted 2023-02-19

【中文标题】我如何设置 React-Table 的样式？

【英文标题】：How can I style React-Table?

【发布时间】：2019-05-19 09:05:00

【问题描述】：

我正在使用 react-table 创建一个可过滤的表格，但是我想按照我想要的方式设置它的样式。我应该直接在 node_modules 应用程序中更改它，还是应该创建自己的 CSS 文件并覆盖动态检查元素？

【问题讨论】：

您可以查看答案吗？我在几个应用程序中设计了 React-Table 的样式，很乐意为您提供帮助。

【参考方案1】：

对于 React-Table v6，如果你想使用 css 文件，基本上可以通过 2 种方式完成。

从 npm 包中的 css 文件开始，覆盖您要更改的部分

从您自己的 css 文件开始，为需要设置样式的所有内容设置样式

广告 1：

import "react-table/react-table.css"
import "./your_own_styles.(s)css"

广告 2：

import "./your_own_styles.(s)css"

要了解您可以在自己的 css 文件中使用什么，您可以查看以下要点：https://gist.github.com/sghall/380aa1055bcad4db22d1fc258d7f09d0

或者首先从 react-table npm 包（在你的 node_modules 中）复制 react-table/react-table.css。

【讨论】：

如果必须补充：当被问到这个问题时，React-Table 6 是稳定版本。现在是 React-Table7，您可以在其中编写大部分所需的组件，例如 TR/TD 和标题，因此它们的样式会有所不同。 React-Table7 还具有 Material-UI 集成。

【参考方案2】：

绝对不要更改 node_modules。您可以使用内联样式或附加样式。

https://reactjs.org/docs/faq-styling.html

【参考方案3】：

绝对用您自己的文件覆盖 CSS 类。这是为库中的组件设置样式的常见做法。