Question

我正在使用虚拟化选择的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}
  />
)
  }
}

Answer 1

react-virtualized-select目前不支持您在示例中显示的option.style属性，仅option.className。（您可以看到default optionRender source here。）

如果您想要自定义选项样式，则需要override the optionRenderer as described in the docs。在react-virtualized-select demo page（＆＃34;自定义选项渲染器＆＃34;下）中有一个示例，该示例的源代码为in the GitHub repo。

我建议分支默认渲染器和自定义，如下所示：

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

或者，如果您要向项目提交PR以向{0}添加对option.style的支持，我愿意对其进行审核。

React virtualized-select自定义选项样式

1 个答案: