反応テーブルフィルタ入力フィールドのスタイルを設定するにはどうすればよいですか？

Question

私は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> 

はここで、「姓」の欄は、入力フィールドに、フィルタ可能ですcodepenですしかし、入力値を列自体にバインドする方法はわかりません。

私は特定の列に次のように試してみたが、それは何もレンダリングされません。

{ 
    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> 
    ) 
    } 

Answer 1

これは、プレーンCSSで達成することができます。テーブルにidまたはclassを与え、必要に応じて入力をターゲットにしてスタイルを設定します。

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

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

より良いオプションは、内蔵のフィルター用のカスタムUIを定義するFilter列オプションreact-table Sを使用することです。これは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> 
) 
);