【问题标题】：Custom styling of Filters in react-table反应表中过滤器的自定义样式
【发布时间】：2019-03-08 09:15:31
【问题描述】：

我已经用 react-table 构建了一个表，并希望将 react-select 组件用作过滤组件。除了 react-select 组件的下拉列表被表格隐藏之外，一切都已启动并运行。

我在这个问题上工作了很长时间。使用样式设置 react-select 在过滤器行中看起来不错。

问题是我找不到任何其他方法来覆盖 CSS 规则

.ReactTable .rt-th,.ReactTable .rt-td

这似乎控制了所有过滤器的行。这个 css 的规则是 overflow:hidden; 并将其更改为 overflow:visible; 解决了我的问题。

硬编码此文件中的更改当然不是“正确的做法”，因为我可能会在其他地方遇到麻烦。

我尝试过的事情：

将styles={{overflow:visible}} 传递给我的过滤器组件。这会导致一个奇怪的 style='Object object' 并且我的样式没有被读取。
传递getProps:()=>{style:{overflow:'visible'}}。尝试了其他一些方法然后 getProps 但没有运气。

还有其他想法或建议吗？

解决方案

文档中缺少道具getTheadFilterThProps。通过在 react-table 文件夹中搜索找到该属性，并检查文档中是否缺少任何道具。

<ReactTable 
    getTheadFilterThProps={(state, rowInfo, column) => {
                            return {
                              style: {
                                overflow: 'visible',
                              }
                            };
                          }}

【问题讨论】：

标签： css react-select react-table

【解决方案1】：

好的，找到合适的道具时，答案很简单。我最终在 react-table 的安装文件夹中搜索了getTheadFilterTrProps。然后我发现还有一些可用的道具。

我最终添加了

<React
    getTheadFilterThProps={(state, rowInfo, column) => {
      return {
        style: {
          overflow: 'visible',
        }
      };
    }}

【讨论】：

这对我不起作用。也许现在 api 已经改变了。