Styling a Select element from react-select - reactjs

Question

I'm using a select element from the react-select library, and in my project I'm using styled-components.
I wanted to ask if it is possible for me to style it in my styles.ts file. if it's not possible, can you guys give any suggestions of how to do the styling??
Inside a React:FC
import Select from 'react-select'
...
const options = [
{ value: 'Income', label: 'Income' },
{ value: 'Expense', label: 'Expense' },
]
...
<Form>
<InputElement />
<Select options={options} />
</Form>

Answer 1

Yes, it is possible to provide your own custom styles, react-select provides an object-based approach for styling the Select component.
Reference to the docs
Here is a simple example,
const customStyles = {
option: (provided, state) => ({
...provided,
borderBottom: '1px dotted pink',
color: state.isSelected ? 'red' : 'blue',
padding: 20,
}),
control: () => ({
// none of react-select's styles are passed to <Control />
width: 200,
}),
singleValue: (provided, state) => {
const opacity = state.isDisabled ? 0.5 : 1;
const transition = 'opacity 300ms';
return { ...provided, opacity, transition };
}
}
const App = () => (
<Select
styles={customStyles} // pass the customStyles object to the styles prop
options={...}
/>
);
Select is very customizable through the keys provided to the custom style object.
One thing to remember is that each key will be a style function where the first argument will be the provided styles and the second argument will the state of select i.e isFocused, isSelected.
EDIT- While it is the suggested way of providing custom styles with the object-based approach. If you really want to style the Select component with styled-components, here is an example (you have to provide a classNamePrefix through prop and style based on classNames)
More on details on styling with classNames docs
import Select from 'react-select';
import styled from 'styled-components';
const SelectElement = styled(Select)`
.react-select-container {
// custom styles
}
.react-select__control {
// custom styles
}
.react-select__indicators {
// custom styles
}
`;
const MySelect = (props) => {
return (
<SelectElement classNamePrefix="react-select" options={options} {...props}/>
)
}

Answer 2

Yes, you can do it like this
import ReactSelect from 'react-select';
import styled from 'styled-components';
const ReactSelectStyled = styled(ReactSelect)`
// you have to provide custom styles through class names
// example
.react-select__option {
// custom styles
}
`;
Additionally, you can change the prefix of the class name (i.e "react-select" part in the class names) by providing the prefix through the classNamePrefix prop to the Select component.