我想更改 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] 删除。
我来说两句