How do i highlight selected item in dropdown

I want to apply a css class to the current selected item when the dropdown is open. Something like the following.

As you can see the current selected item is highlighted in red when the dropdown is opened. This is done by passing the className to the option that is currently selected as follows:-

const options = data.map((item) => {
    let className = item.isDefault ?
        'highlight-selected-item ' :
        '';

    return {
        label: item.profileName,
        value: item.profileName,
        className
    };
});

I think it would be great if the Select component can take a prop like optionSelectedClassName so that we don’t have to manually see which item is selected and add a className to that.

[harsimarriar96]

This will work.

const CustomStyle = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? {Color1} : {Color2},
    ':active': {
      backgroundColor: state.isSelected ? {Color3} : {Color4}
    }
  })
}
<Select styles={customStyle} >

[jackblackCH]

This will work.

const CustomStyle = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? {Color1} : {Color2},
    ':active': {
      backgroundColor: state.isSelected ? {Color3} : {Color4}
    }
  })
}
<Select styles={customStyle} >

':active': { backgroundColor: 'hotpink' } This should be mentioned in the docs.