Javascript 反应虚拟化选择自定义选项样式

我正在使用虚拟化的select-React组件。我想样式的文本和背景颜色的选项，而它是在下拉列表。对于下面的简单代码，当我选择选项1时，搜索栏背景为红色，搜索栏背景变为蓝色，但我希望选项下拉列表中的背景为蓝色。此外，颜色属性似乎根本不起作用；是否只有某些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}
  />
)
  }
}

render（）{
常量样式={
颜色：“红色”，
背景：“红色”
};
常量选项=[
{标签：“一”，值：1，样式：{背景：'blue'}，
{标签：“2”，值：2}，
{标签：“三”，值：3}
//{标签：“三”，值：3，禁用：true}
//等等。。。
]
返回(
this.setState（{selectValue}）}
value={this.state.selectValue}
占位符=“搜索”
style={style}
/>
)
}
}

react virtualized select

当前不支持

选项。示例中显示的style

属性仅支持

选项。className

。（您可以看到。）

如果您想要像您描述的那样定制选项样式，您需要这样做。在上（在“自定义选项渲染器”下）有一个这样的示例，该示例的源代码是

我建议分叉默认渲染器并进行自定义，如下所示：

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

函数YourOptionRenderer（{focusedOption，focusOption，key，labelKey，option，selectValue，style，valueArray}）{
常量className=['VirtualizedSelectOption']
如果（选项===focusedOption）{
push（'VirtualizedSelectFocusedOption'）
}
如果（选项已禁用）{
push（'VirtualizedSelectDisabledOption'）
}
if（valueArray&&valueArray.indexOf（选项）>=0）{
className.push（'VirtualizedSelectedOption'）
}
const events=option.disabled
? {}
: {
onClick:（）=>selectValue（选项），
onMouseCenter:（）=>focusOption（选项）
}
返回(
{选项[labelKey]}
)
}

或者，如果您想向项目提交PR，以向默认渲染器添加对

option.style

的支持，我愿意查看它