我对多选使用了反应选择。现在,我想为其样式设置而不是获取样式。
const selectStyles = {
control: (base) => ({
...base,
fontSize: '16px',
fontWeight: 'bold',
borderRadius: '8px',
padding: '6px 5px',
border: '1px solid #21274F !important',
boxShadow: 'none',
'&:focus': {
border: '0 !important',
},
}),
}
<Select
placeholder='Type Team Name...'
value={getOptions(value)}
options={getOptions(data)}
onChange={(data) => setValue(data || [])}
styles={selectStyles}
isMulti
isClearable
isSearchable
/>
看起来像这样。我想将背景颜色更改为蓝色,文本=白色。我该如何实现?请帮忙。
编辑:应用@Manish Jangir代码后。看起来像这样。
但是我想要文字,即。 “领导力”显示为白色,悬停在十字形上的红色将被移除。
答案 0 :(得分:0)
有很多自定义自定义组件来为整个选择样式。看看this。您需要使用 multiValue 组件设置样式以更改单个标记的样式:
const selectStyles = {
control: (base) => ({
...base,
fontSize: '16px',
fontWeight: 'bold',
borderRadius: '8px',
padding: '6px 5px',
border: '1px solid #21274F !important',
boxShadow: 'none',
'&:focus': {
border: '0 !important',
},
}),
multiValue: (base) => ({
...base,
backgroundColor: 'blue',
color: 'white',
}),
}