Question

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

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

我需要在＆＃39;选项中更改选择内部的颜色。标签。使用此函数由父组件通过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>)
  }

这就是道具传递的方式：

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

我尝试创建一个className来改变＆＃39;选项中的颜色。标签，但它没有工作。我怎么能这样做？

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>

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

1 个答案: