React Table - 用户控制 Header 背景颜色

Question

我有一个 re-useable table 组件，我正在使用原版 CSS 进行样式设置。我有六种可能的颜色，我希望用户能够根据需要从中选择以更改 table header 背景颜色。理想情况下，这个颜色选择应该是组件上的一个道具，但我不知道该怎么做。

在我的 CSS 文件中，我定义了颜色变量：

th {
 --deq-primary: #0080b7;
  --daq-primary: #1ab7da;
  --ddw-primary: #147995;
  --dwq-primary: #034a64;
  --derr-primary: #05a68b;
  --dwmrc-primary: #f26322;
}

th {
  background-color: var(--deq-primary);
  color: white;
  border: 1px solid #cecece;
}

是否可以在我的 table 上设置一个道具来接受这些值之一，以便可以在组件内更改 header 背景颜色？

类似

<MyTable headerColor="ddw-primary" />

header 颜色将更改为 ddw-primary 颜色

更新我能够实施 Hugo Elhaj-Lahsen 建议。变量名称作为字符串传递，我更新了他提供的示例以说明变量名称中所需的 --。所以代码中的最终样式标签看起来像


return <table style={{backgroundColor: `var(--${headerColor})` }}>
  {// ...}
</table>


....
>

在组件中，我将 var 名称作为字符串传递：

<MyTable
        columns={columns}
        data={data}
        headerColor="my-color-variable-name"
        />

Answer 1

一个可能的没有库的 React 解决方案是将 CSS 变量名作为 props 传递，并 在组件的样式中引用它 。假设我们有：

<MyTable headerColor="ddw-primary" />

和 MyTable 组件中定义的 CSS 变量。假设您通过 style= 属性设置样式，您可以：

return <table style={{backgroundColor: `var(${headerColor})` }}>
  {// ...}
</table>

React Table - 用户控制 Header 背景颜色

React Table - User COntrolled Header background Color

css

reactjs

react-component