解决方案

Question

我已经建立了一个带有react-table的表，并希望将react-select组件用作过滤组件。除了react-select组件的下拉菜单被表隐藏之外，其他所有操作都已正常运行。

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

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

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

似乎可以控制所有过滤器的行。该CSS具有overflow:hidden;的规则，将其更改为overflow:visible;可解决我的问题。

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

我尝试过的事情：

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

还有其他想法或建议吗？

解决方案

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

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

Answer 1

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

我最终添加了

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

自定义表中过滤器的样式

解决方案

1 个答案: