Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

ReactJS

November 8, 2023

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:

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.
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;