如何在Semantic UI React中实现下拉框选中选项时更改背景色

要实现选中选项后改变下拉框背景色，你可以通过状态控制+自定义样式的方式完成，具体方案如下：

1. 维护选中状态并绑定事件 #

在组件中用useState跟踪下拉框的选中值，同时绑定onChange事件更新状态：

import { useState } from 'react';
import { Dropdown } from 'semantic-ui-react';

const YourComponent = () => {
  const [selectedValue, setSelectedValue] = useState(null);
  // 示例选项数组，按Semantic UI要求的格式定义
  const names = [
    { key: '1', text: '张三', value: '1' },
    { key: '2', text: '李四', value: '2' }
  ];

  const handleSelect = (e, { value }) => {
    setSelectedValue(value);
  };

  return (
    <Dropdown
      placeholder='Name'
      selection
      search
      options={names}
      className={`filter-dropdown ${selectedValue ? 'selected' : ''}`}
      onChange={handleSelect}
      value={selectedValue}
    />
  );
};

export default YourComponent;

2. 添加自定义CSS样式 #

在CSS文件中定义初始状态和选中状态的背景色：

/* 初始状态背景（匹配你提供的浅色效果） */
.filter-dropdown {
  background-color: #f5f5f5;
}

/* 选中后的背景（匹配你提供的深色效果） */
.filter-dropdown.selected {
  background-color: #2185d0;
  color: white; /* 可选，调整文字色保证可读性 */
}

备选方案：内联样式 #

如果不想额外添加CSS类，也可以直接用内联样式动态设置：

<Dropdown
  placeholder='Name'
  selection
  search
  options={names}
  className='filter-dropdown'
  onChange={handleSelect}
  value={selectedValue}
  style={{
    backgroundColor: selectedValue ? '#2185d0' : '#f5f5f5',
    color: selectedValue ? 'white' : 'inherit'
  }}
/>

说明：Semantic UI React的Dropdown默认会给选中状态添加active类，但默认样式可能不符合需求，通过自定义状态控制能更精准地实现你想要的视觉效果。

内容的提问来源于stack exchange，提问作者RuLee