I'm having global ReactSelect with default styling. I need to override just one of the styling's property. Consider the following as the Reusable CustomReactSelect Component.
custom-react-select.tsx
export const CustomReactSelect = (props) => {
const defaultStyle = {
control: (provided, state) => ({
...
backgroundColor: (state.isDisabled) ? '--theia-editorGroupHeader-tabsBackground' : 'var(--theia-input-background)',
fontSize: 'var(--theia-ui-font-size1)',
...
}),
}
...
return <Select
...
styles = {...defaultStyle,...props.style}
...
/>
}
Consider a situation where I just need to override the background of the control Style in a similar fashion.
const overrideControlStyle = {
backgroundColor: (state.isFocused) ? 'red' : 'black'
}
I only need the override the backgroundColor, in the end the props that should be sent to the React Select should be as follows,
Sent Props...
{
control: (provided, state) => ({
...
backgroundColor: (state.isFocused) ? 'red' : 'black',
fontSize: 'var(--theia-ui-font-size1)',
...
}),
}
You are on the right track. provided are the current default styles for the particular component of the select, so your styles need to merge with them.
(provided, state) => ({
...provided,
backgroundColor: 'black',
...(state.isFocused && {
backgroundColor: 'red'
}),
...(state.isDisabled && {
backgroundColor: 'var(--theia-editorGroupHeader-tabsBackground)'
})
})
So consider your order of importance with your overrides. whichever conditional you define last will win. If the control is focused, then backgroundColor will be red, however isDisabled is more important the isFocused, so defining it last will use the variable instead.
This might not be exact for your use case, but hopefully will put you on the right path.