如何在 React-select 中更改选项颜色

How to change options color in React-select

我想改变react中选项的颜色-select,

这里是我的意思的图片,因为你看颜色不清晰

反应select代码:

    <Select
        isMulti="true" // allow to select mutli options
        isRtl="true" // right to left
        name="name" // html name
        options={accountsNames} // options
        className="basic-multi-select"
        classNamePrefix="select"
        isSearchable="true" // searchable for the closest one
        placeholder="اختر ..." // if there is no option selected 
        styles={customStyles}
/>

更新

感谢 Amruth L S 先生 它帮助我更改突出显示主题,但我还想知道如何更改菜单中选项的字体颜色

新图,如你所见,字体颜色为白色,不清晰

新密码:

    <Select
        isMulti="true" // allow to select mutli options
        isRtl="true" // right to left
        name="name" // html name
        options={accountsNames} // options
        className="basic-multi-select"
        classNamePrefix="select"
        isSearchable="true" // searchable for the closest one
        placeholder="اختر ..." // if there is no option selected 
        theme={(theme) => ({
  ...theme,
  borderRadius: 0,
  colors: {
  ...theme.colors,
    text: '#3599B8',
    font:'#3599B8',
    primary25: '#3599B8',
    primary: '#3599B8',
    neutral80: 'black',
    color: 'black',
  },
})}
/>

你能试试这个吗

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    borderBottom: '1px dotted pink',
    color: state.isSelected ? 'red' : 'blue',
    padding: 20,
  })
}

<Select
        isMulti="true" // allow to select mutli options
        isRtl="true" // right to left
        name="name" // html name
        options={accountsNames} // options
        className="basic-multi-select"
        classNamePrefix="select"
        isSearchable="true" // searchable for the closest one
        placeholder="اختر ..." // if there is no option selected 
        theme={(theme) => ({
  ...theme,
  borderRadius: 0,
  colors: {
  ...theme.colors,
    text: '#3599B8',
    font:'#3599B8',
    primary25: '#3599B8',
    primary: '#3599B8',
    neutral80: 'black',
    color: 'black',
  },
})}
styles={customStyles}
/>