如何设置反应选择选项的样式?

时间:2020-10-26 07:55:19

标签: reactjs

我对多选使用了反应选择。现在,我想为其样式设置而不是获取样式。

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

enter image description here

看起来像这样。我想将背景颜色更改为蓝色,文本=白色。我该如何实现?请帮忙。

编辑:应用@Manish Jangir代码后。看起来像这样。enter image description here

但是我想要文字,即。 “领导力”显示为白色,悬停在十字形上的红色将被移除。

1 个答案:

答案 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',
        }),
    }