Sometimes, we want to change zIndex of the items in a react-select drop down.

In this article, we’ll look at how to change zIndex of the items in a react-select drop down.

How to change zIndex of the items in a react-select drop down?

To change zIndex of the items in a react-select drop down, we can set the menuPortalTarget, menuPosition and styles props.

For instance, we write:

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

const options = [
  { label: "Apple", value: "apple" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Pear", value: "pear" },
  { label: "Banana", value: "banana" }
];

export default function App() {
  return (
    <form>
      <Select
        menuPortalTarget={document.body}
        menuPosition="fixed"
        options={options}
        styles={{
          menuPortal: (provided) => ({ ...provided, zIndex: 9999 }),
          menu: (provided) => ({ ...provided, zIndex: 9999 })
        }}
      />
    </form>
  );
}

We set menuPortalTarget to render the menu as the direct child of the body element.

menuPosition is set to 'fixed' to set the position CSS property of the drop down menu to fixed.

And we set the styles property to an object with the menuPortal and menu methods.

In both methods, we return an object with the existing provided styles properties and the zIndex set to 9999 to set the z-index of the drop down menu items to 9999.

Conclusion

To change zIndex of the items in a react-select drop down, we can set the menuPortalTarget, menuPosition and styles props.