CODEWITHSUNDEEP
cssreactjsstyles
Lizz Parody
Lizz Parody

Reputation: 1765

Change the color of a select box's option in React

I have this component that displays a dropdown in a select tag

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

I need to change the color of inside the select, in the 'option' tag. Which is passed by props by the parent component with this function:

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

And this is how is passed by props:

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

I tried to create a className changing the color inside the 'option' tag but it didn't work. How can I do this?

Upvotes: 0

Views: 3599

Answers (1)

Mika Sundland
Mika Sundland

Reputation: 18939

You set the style of the option tag:

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

Upvotes: 2

Related Questions