在 React 中更改选择框选项的颜色

Question

我有一个在选择标签中显示下拉列表的组件

const SortRetroDropdown = ({ handleFilterRetros, projects }) => {
  return (
    <div className='o-wrapper c-filter-retrospective'>
      <label htmlFor='c-start-retro-form-retroname'>Select to sort by project</label>
      <select className='c-start-retro-dropdown'
        defaultValue={'all'}
        name='projectList'
        form='start-retro-form'
        onChange={handleFilterRetros}>
        {projects}
      </select>
    </div>
  )
}

我需要在“选项”标签中更改选择内部的颜色。父组件使用此函数通过 props 传递：

  createProjectList (userProjects) {
    const projectsList = userProjects.map((project) => (
      <option key={project.get('id')} value={project.get('id')}>
        {project.get('name') === 'default' ? 'Unassigned' : project.get('name')}
      </option>
    ))
    return projectsList.push(<option key={'all'} value={'all'}>{'Show All'}</option>)
  }

这就是 props 的传递方式：

<SortRetroDropdown
   projects={this.createProjectList(userProjects)}
   handleFilterRetros={this.handleFilterRetros}
/>

我尝试创建一个类名来更改“选项”标签内的颜色，但没有成功。我该怎么做？

Answer 1

你设置option标签的样式：

<option style={{ backgroundColor: 'red', color: 'blue' }} key={project.get('id')} value={project.get('id')}>
  {project.get('name') === 'default' ? 'Unassigned' : project.get('name')}
</option>