Reagieren virtualisiert-wählen Sie benutzerdefinierte Optionen Stile

Question

Ich verwende die virtualisierte-wählen React-Komponente. Ich möchte die Text- und Hintergrundfarbe der Option im Drop-down-Menü gestalten. Für den einfachen Code, den ich unten habe, ist der Hintergrund der Suchleiste rot, und der Hintergrund der Suchleiste wird blau, wenn ich Option 1 wähle, aber ich möchte, dass der Hintergrund im Dropdown-Menü der Option blau ist. Außerdem scheint das Farbattribut überhaupt nicht zu funktionieren. sind nur bestimmte CSS-Attribute veränderbar?

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 hat derzeit keine option.style Eigenschaft unterstützen, wie Sie in Ihrem Beispiel gezeigt haben, nur option.className. (Sie können die default optionRender source here sehen.)

Wenn Sie benutzerdefinierte Option-Styling möchten, wie Sie beschrieben haben, müssen Sie override the optionRenderer as described in the docs. Es gibt ein Beispiel dafür auf der react-virtualized-select demo page (unter "Custom Option Renderer") und der Quellcode für dieses Beispiel ist in the GitHub repo.

Ich würde empfehlen, die Standard-Renderer und Customizing gabeln, etwa so:

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

Alternativ kann, wenn Sie möchten, dass eine PR für das Projekt vorzulegen, Unterstützung für option.style auf den Standard renderer- I Ich bin bereit, es zu überprüfen.