How to style react-select options? - reactjs

Question

I have used a react-select for multiselect. Now I want to style it but not getting it.
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
/>
Its looking like this. I want to change the background-color to blue and text = white. How can I achieve this? please help.
EDIT: After applied #Manish Jangir code. It looking like this.
But I want the text ie. 'leadership' to appear white in color and on hover the appering red color on cross to be removed.

Answer 1

There are a lot of custom custom components to style the entire select. Have a look at this. You need to use multiValue component to style to change the styles of a single tag:
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',
}),
}

Answer 2

It's been a while, but adding this here for who would have the same problem and wants to tackle it with custom components and custom styling.
I had the similar issue as well. Creating custom component like in docs and wrapping it around components.Option didn't give me the desired result in terms of styling.
After digging through, I found an example in react.select issues. So instead of creating custom component that wraps components.Option, you can now create your own component and pass in the props as you needed. This would also allow you to style the component with classes easily (in my case, it was Tailwind).