如何将React应用select下拉菜单选中option的字体颜色改为黑色

方案1：基于原生select标签实现 #

如果用原生select做自定义样式，可通过CSS伪类实现状态区分，无需额外添加JS逻辑：

组件代码 #

import { useState } from 'react';

function CustomSelect() {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <select 
      className="custom-select" 
      value={selectedValue}
      onChange={handleChange}
    >
      <option value="" disabled>请选择选项</option>
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
  );
}

对应CSS样式 #

/* 未选中状态可保留你现有的样式，此处为示例 */
.custom-select {
  color: #999;
  /* 其他原有样式：边框、内边距、圆角等 */
}

/* 有选中值时自动触发，文字变为黑色 */
.custom-select:valid {
  color: #000;
}

/* 下拉面板内选中的option文字也设为黑色 */
.custom-select option:checked {
  color: #000;
  background: #fff; /* 可按需调整选中背景色 */
}

方案2：自主实现模拟Select组件（非原生标签） #

如果是用div、ul完全模拟的下拉组件，直接通过选中状态绑定类名修改样式即可：

组件代码 #

import { useState } from 'react';

function CustomSelect() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);
  const options = [
    { label: '选项1', value: 'option1' },
    { label: '选项2', value: 'option2' },
    { label: '选项3', value: 'option3' },
  ];

  const handleSelect = (option) => {
    setSelectedOption(option);
    setIsOpen(false);
  };

  return (
    <div className="custom-select-wrap">
      {/* 下拉触发框 */}
      <div 
        className={`select-trigger ${selectedOption ? 'selected' : ''}`}
        onClick={() => setIsOpen(!isOpen)}
      >
        {selectedOption ? selectedOption.label : '请选择选项'}
      </div>
      {/* 下拉选项面板 */}
      {isOpen && (
        <ul className="select-dropdown">
          {options.map(option => (
            <li 
              key={option.value}
              className={`select-option ${selectedOption?.value === option.value ? 'active' : ''}`}
              onClick={() => handleSelect(option)}
            >
              {option.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

对应CSS样式 #

.select-trigger {
  /* 保留原有未选中样式 */
  color: #999;
}
/* 选中后触发框文字变黑 */
.select-trigger.selected {
  color: #000;
}
/* 下拉面板中选中项文字变黑 */
.select-option.active {
  color: #000;
  background-color: #f5f5f5; /* 可按需调整选中背景 */
}

方案3：使用第三方UI库的Select组件 #

如果是用Ant Design、MUI等第三方UI库的Select组件，直接覆盖对应选中状态的样式即可：
以Ant Design为例：

/* 覆盖选中后触发框文字颜色 */
.ant-select-selector {
  color: #000 !important;
}
/* 覆盖下拉面板选中项文字颜色 */
.ant-select-item-option-selected {
  color: #000 !important;
}

注意：如果样式不生效，可通过浏览器F12检查对应选中元素的类名，调整选择器优先级即可。

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