如何设置反应表过滤器输入字段的样式？

Posted 2023-02-19

【中文标题】如何设置反应表过滤器输入字段的样式？

【英文标题】：How do I style react-table filter input field?

【发布时间】：2017-11-30 03:56:35

【问题描述】：

我正在使用react-table，并且对每个有效的列都有一个过滤方法。但是，我似乎无法弄清楚我实际上如何设置过滤器输入字段的样式 - 它现在是白色的并且与背景融为一体。

这是一个代码笔，其中“姓氏”列是可过滤的，输入字段：https://codepen.io/anon/pen/QgOdOp?editors=0010

我想给这个输入字段添加一些语义样式，比如：

                    <div className="ui icon input">
                        // Input values would go here
                        <i className="search icon" />
                    </div>

但我似乎不知道如何将输入值绑定到列本身。

我在特定列中尝试了以下内容，但它没有呈现任何内容：

    Header: 'Last Name',
    filterable: true,
    id: 'lastName',
    accessor: d => d.lastName
    Filter: Cellinfo => (
                <div className="ui icon input">
                     <select onChange=event => onFiltersChange(event.target.value) value=filter ? filter.value : ''></select> 
                    <i className="search icon" />
                </div>
    )
  

【问题讨论】：

这是 2 个问题 - 如何设置输入样式？以及如何将输入值绑定到列？

主要是如何实际应用样式。另一部分我会从我想的文档中弄清楚:)

您是否要在输入字段中添加图标？或者你想要什么样的造型？

是的，我有一些来自语义 UI 的 css，我想将其应用于输入字段，其中一部分确实是添加了一个搜索图标 :)

演示是否包含Last Name 列中的输入？

【参考方案1】：

这可以通过纯 CSS 来完成。给表格一个id 或class，然后根据需要定位输入并设置它们的样式。

<ReactTable 
  showFilters=true 
  data=makeData() 
  columns=columns 
  className='react-table' 
/>

.react-table input 
  background-color: black;
  color: white;

更好的选择是使用react-tables 内置的Filter 列选项为过滤器定义自定义用户界面。这记录在Custom Filtering example 中。这允许您传递一个style 对象。

const columns = [
  
    Header: 'Name',
    columns: [
      
        Header: 'First Name',
        accessor: 'firstName',
      ,
      
        Header: 'Last Name',
        filterable: true,
        id: 'lastName',
        accessor: d => d.lastName,
        Filter: (filter, onChange) => (
          <input
            onChange=event => onChange(event.target.value)
            value=filter ? filter.value : ''
            style=
              width: '100%',
              backgroundColor: 'gray',
              color: 'white',
            
          />
        ),
      ,
    ],
  ,
  
    Header: 'Info',
    columns: [
      
        Header: 'Age',
        accessor: 'age',
      ,
    ],
  ,
];

使用它你可以定义一个背景图像来实现你想要的图标。或者您可以传入一个自定义组件，该组件在输入后面设置一个图标元素。像这样的：

Filter: (filter, onChange) => 
  return (
        <div style=position: 'relative'>
        <input
          onChange=event => onChange(event.target.value)
          value=filter ? filter.value : ''
          style=
            width: '100%',
            backgroundColor: 'transparent',
            color: '#222222',
          
        />
        <i style=position: 'absolute', right: '10px', lineHeight: '30px'>
          Icon
        </i>
      </div>
  )
);

【讨论】：

我尝试实现您的第二个示例，添加一个样式属性（几乎将整个过滤器复制粘贴到我当前的列中）。什么都没变，不影响造型？

等待 - 它在 codepen 中有效，但不是我自己的示例。有些事情是不确定的......这一定是一直以来的问题。感谢您的帮助..检查出来。这真的很奇怪，我可以设置行的样式，但显然过滤器列不接受它。

永远不要只复制/粘贴而不查看代码。由于人们试图快速回答问题，*** 上的许多示例都包含伪代码和拼写错误。你能让它工作吗？

不过，这只是样式。不，表格呈现时没有错误或警告，并且过滤器输入在那里（并且正在工作），但样式根本没有以某种方式应用。

我看到了您在 Codepen 中应用的样式。您是在谈论本地构建吗？