How to Style React-select Options

To style the options in a react-select component, we can use the ‘styles’ prop. This prop allows us to apply custom styles to various elements within the Select component, including the options. Here’s how we can style the options:

1. Define custom styles for the options using the ‘styles’ prop. We can use CSS-in-JS libraries like styled-components or plain JavaScript objects for styling.
2. Pass the custom styles to the ‘styles’ prop in the Select component

import Select from 'react-select';

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    fontSize: 14,
    color: 'blue',
    backgroundColor: state.isSelected ? 'lightblue' : 'white', // Change background color for selected options
  }),
};

const MySelect = () => (
  <Select
    options={[1, 2, 3, 4]}
    placeholder="Select something"
    clearable={false}
    styles={customStyles}
  />
);

export default MySelect;