Sometimes, we want to style react-select drop down options.

In this article, we’ll look at how to style react-select drop down options.

How to style react-select drop down options?

To style react-select drop down options, we can create an object with the styles we want to apply and set that as the value of the styles prop.

For instance, we write:

import React from "react";
import Select from "react-select";

const colourStyles = {
  control: (styles) => ({ ...styles, backgroundColor: "white" }),
  option: (styles, { isDisabled }) => {
    return {
      ...styles,
      backgroundColor: isDisabled ? "red" : "green",
      color: "#FFF",
      cursor: isDisabled ? "not-allowed" : "default"
    };
  }
};

const items = [
  { label: "orange", value: "orange" },
  { label: "apple", value: "apple", isDisabled: true }
];

export default function App() {
  return (
    <div>
      <Select
        defaultValue={items[0]}
        label="Single select"
        options={items}
        styles={colourStyles}
      />
    </div>
  );
}

We create the colourStyles object with the control method that return an object with the styles.

And we have the option method that returns the styles for the options.

We set the backgrounsdColor according to the value of the isDisabled property in the option.

And we set the color of the option to set the option text’s color.

Also, we set the cursor property to the cursor icon we want according to the isDisabled property of the option.

The isDisabled property comes from the isDisabled property of the items options.

Conclusion

To style react-select drop down options, we can create an object with the styles we want to apply and set that as the value of the styles prop.