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

德绍

我想更改 react-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 LS 先生,它帮助我更改了高度主题,但我也想知道如何更改菜单中选项的字体颜色

新图像,如您所见,字体颜色为白色且不清晰

在此处输入图片说明

新代码:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在reactjs中更改选项的颜色?

如何在React Navigation 5中更改选项卡图标之间的距离?

如何在angularJS中基于选项是否与数据相关来更改选项颜色?

如何使用控制台在javascript中的select标签中更改选项?

如何在jQuery的select2中的2个选择框之间更改选定的选项元素?

如何在Kali Linux中的Wireshark中更改选项的颜色?

如何更改选项菜单点的颜色?

如何在Xamarin iOS中更改选项卡式页面的背景颜色?

如何在Xamarin.Droid中更改选项卡式页面指示器的颜色?

如何在NSTabView中更改选项卡按钮和视图本身的颜色?

如何在Android中更改选项卡指示器颜色

如何在 AvalonEdit 中更改选项卡的符号和颜色

如何在 React select 中显示数据

如何防止 Angular Material mat-select 更改选项?

如何更改选定的react-bootstrap ToggleButton的背景颜色?

如何更改 <select> 菜单中选项的颜色?

如何更改选择选项中第一个元素的颜色?

iOS-如何更改选项卡栏中图标的颜色moreViewController

如何使用Android中的代码使用TabLayout更改选定的选项卡文本颜色?

如何更改选项卡栏中未选中项目的颜色?

在 HTML 中单击时如何更改选定的选项卡颜色

如何在react-bootstrap select选项中使用Translate

React-Select:如何在加载选项时显示“ Loading ...”

如何在NetBeans中更改选项卡图标?

如何在QPlainTextEdit中更改选项卡的宽度

如何在选择列表中更改选项

如何更改选择中下拉选项的轮廓颜色?

如何更改选项卡布局的文本颜色?

如何使用javascript仅更改选定选项的背景颜色?