仮想化されたカスタムオプションのスタイルに対応する

Question

仮想化されたReactコンポーネントを使用しています。私はそれがドロップダウン内にある間、オプションのテキストと背景色をスタイルしたいと思います。私は以下の簡単なコードでは、検索バーの背景が赤で、オプション1を選択すると検索バーの背景が青色に変わりますが、オプションドロップダウンの背景を青色にしたいと思います。さらに、color属性はまったく機能していないようです。特定のCSS属性のみが変更可能ですか？

render() { 

const styles = { 
    color: "red", 
    background: "red" 
}; 

const options = [ 
    { label: "One", value: 1 , style: {background: 'blue'}}, 
    { label: "Two", value: 2 }, 
    { label: "Three", value: 3} 
    //{ label: "Three", value: 3, disabled: true } 
    // And so on... 
] 

return (
    <VirtualizedSelect 
    options={options} 
    onChange={(selectValue) => this.setState({ selectValue })} 
    value={this.state.selectValue} 
    placeholder="Search" 
    style={styles} 
    /> 
) 
    } 
} 

Answer 1

react-virtualized-selectあなたはあなたの例で示してきたように、現在、唯一option.classNameをoption.styleプロパティをサポートしていません。 （default optionRender source hereが表示されます）

説明したようにカスタムオプションを使用する場合は、override the optionRenderer as described in the docsが必要です。 react-virtualized-select demo page（「カスタムオプションレンダラー」の下）の例があり、その例のソースコードはin the GitHub repoです。

私はそうのように、デフォルトのレンダラとカスタマイズをフォークお勧めします：あなたは私renderer-デフォルトにoption.styleためのサポートを追加するためのプロジェクトへのPRを提出したい場合は、

function YourOptionRenderer ({ focusedOption, focusOption, key, labelKey, option, selectValue, style, valueArray }) { 
    const className = ['VirtualizedSelectOption'] 
    if (option === focusedOption) { 
    className.push('VirtualizedSelectFocusedOption') 
    } 
    if (option.disabled) { 
    className.push('VirtualizedSelectDisabledOption') 
    } 
    if (valueArray && valueArray.indexOf(option) >= 0) { 
    className.push('VirtualizedSelectSelectedOption') 
    } 

    const events = option.disabled 
    ? {} 
    : { 
     onClick:() => selectValue(option), 
     onMouseEnter:() => focusOption(option) 
    } 

    return (
    <div 
     className={className.join(' ')} 
     key={key} 
     style={{ 
     ...style, 
     ...option.style, 
     }} 
     title={option.title} 
     {...events} 
    > 
     {option[labelKey]} 
    </div> 
) 
} 

代わりそれを再検討するつもりです。