How to set the background color for react-select drop downs?

Sometimes, we want to set the background color for react-select drop downs.

In this article, we’ll look at how to set the background color for react-select drop downs.

How to set the background color for react-select drop downs?

To set the background color for react-select drop downs, we can return an object with the color values set.

For instance, we write:

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

const customStyles = {
  control: (base, state) => ({
    ...base,
    background: "#023950",
    borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
    borderColor: state.isFocused ? "yellow" : "green",
    boxShadow: state.isFocused ? null : null,
    "&:hover": {
      borderColor: state.isFocused ? "red" : "blue"
    }
  }),
  menu: (base) => ({
    ...base,
    borderRadius: 0,
    marginTop: 0
  }),
  menuList: (base) => ({
    ...base,
    padding: 0
  })
};

const options = [
  { label: "Apple", value: "apple" },
  { label: "Orange", value: "orange" }
];

export default function App() {
  return (
    <form>
      <Select styles={customStyles} options={options} />
    </form>
  );
}

We set the styles prop to the customStyles object which has various styles.

The control method in the object returns an object with the style values.

The properties returned includes background, borderRadius, borderColor, boxShadow and other CSS style properties.

We can also style states like hover with "&:hover".

And we can get the state of the drop down from the state parameter.

Likewise, we have the menu and menuList methods to style the menu.

We set the options prop to an array of options.

Now we see we the drop down has a dark blue background and the drop down row that’s hovered over has a light blue background.

Conclusion

To set the background color for react-select drop downs, we can return an object with the color values set.