我应该如何为 react-table 的筛选输入框添加样式？

Question

我应该如何为 react-table 的筛选输入框添加样式？

8

我正在使用react-table，并为每个列设置了一个筛选方法，该方法有效。然而，我无法弄清楚如何实际样式化筛选输入字段-它现在是白色的，并且与背景融合在一起。

这里有一个CodePen，在其中“姓氏”列是可过滤的，带有一个输入字段：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>
    )
  }

- cbll

这是两个问题吗 - 如何为输入设置样式？以及如何将输入值绑定到列？ - Brett DeWoody

主要是如何实际应用样式。我想其他部分我会从文档中了解的 :) - cbll

你是想给输入框添加一个图标吗？还是你想要什么类型的样式？ - Brett DeWoody

是的，我有来自semantic-ui的一些CSS要应用到输入字段，并且其中一部分是确实添加搜索图标 :) - cbll

非常抱歉，我的更改没有保存。现在应该已经更新了，带有一个筛选器输入。 - cbll

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brett DeWoody · Accepted Answer

这可以通过纯CSS实现。给表格一个id或class，然后针对输入框进行样式设计。

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

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

更好的选择是使用react-table内置的Filter列选项来定义筛选的自定义UI。这在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>
  )
);