改变下拉背景颜色

Question

我正在使用语义 UI react css 库，当有人选择一个选项时，我需要更改下拉菜单的背景颜色。

到

<Dropdown
 placeholder='Name'
 selection
 search
 options={names}
 className='filter-dropdown'
 />

Answer 1

在更改时为每个下拉项的选项添加样式

下面的代码片段应该有帮助

...
 const [selected, setSelected] = useState(null)
    const originalOptions = [
      {
        index: 1,
        text: "Davey Jones",
        value: "userone",
        style: { backgroundColor: 'red'}
      },
      {
        index: 2,
        text: "Gengar",
        value: "usertwo",
        style: selected ? { backgroundColor: 'red'} : null
      },
      {
        index: 3,
        text: "Frank Booth",
        value: "fbooth",
        style: { backgroundColor: 'red'}
      }
    ];
     const displayOptions = originalOptions.map(option => {
        return 
          {
            ...option,
            style: selected === option.index ? { backgroundColor: 'red'} : null
          }
     })
...

像这样将其传递给您的下拉组件

 <Dropdown
   placeholder='Name'
   selection
   search
   options={names}
   className='filter-dropdown'
   options={displayOptions}
   onChange={(value)=>setSelected(value.index)}
   ...
 />