How to change react-select tag border radius

Question

I'm trying to override react-select styles to achieve rounded multiValue tags.

So I went ahead and edited the multiValue style attribute like this:

const customStyles = {
multiValue: (styles) => ({
            ...styles,
            backgroundColor: blue,
            borderRadius: "50%",
        }),
}

The background color works perfectly and the tag becomes blue. However the border radius is always stuck at 2px...

        <Select
                options={options}
                styles={customStyles}
                isMulti
            />

How to override the default 2px border-radius imposed by react-select

Bassem Bassem · Accepted Answer · 2020-12-11T08:15:54

It turned out that I was overriding the background color of the multiValueLabel, which was somehow hiding the overridden border-radius in multiValue. Removing the backgroundColor attribute from the multiValueLabel solved the issue.

How to change react-select tag border radius

1 Answers