Styling a Select element from react-select

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.