如何在 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}
/>
我想改变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}
/>