How can I set the z-index for this select?

Question

Hello I would like to set the z-index of the following component :

import React from 'react';
import chroma from 'chroma-js';

import { colourOptions } from './docs/data';
import Select from 'react-select';

const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled
        ? null
        : isSelected
        ? data.color
        : isFocused
        ? color.alpha(0.1).css()
        : null,
      color: isDisabled
        ? '#ccc'
        : isSelected
        ? chroma.contrast(color, 'white') > 2
          ? 'white'
          : 'black'
        : data.color,
      cursor: isDisabled ? 'not-allowed' : 'default',

      ':active': {
        ...styles[':active'],
        backgroundColor: !isDisabled && (isSelected ? data.color : color.alpha(0.3).css()),
      },
    };
  },
  multiValue: (styles, { data }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: color.alpha(0.1).css(),
    };
  },
  multiValueLabel: (styles, { data }) => ({
    ...styles,
    color: data.color,
  }),
  multiValueRemove: (styles, { data }) => ({
    ...styles,
    color: data.color,
    ':hover': {
      backgroundColor: data.color,
      color: 'white',
    },
  }),
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    defaultValue={[colourOptions[0], colourOptions[1]]}
    isMulti
    options={colourOptions}
    styles={colourStyles}
  />
);

I found this solution :

styles={{menu: provided => ({ ...provided, zIndex: 9999, colourStyles })}}

instead of

styles={colourStyles}

But I lose all the colors...

Could you help me please ?

Here is the code :

https://codesandbox.io/s/condescending-noether-1ee0v?file=/example.js:0-1531

Thank you very much !

Matthias · Answer 1 · 2020-11-22T19:27:06.863

0

Note that if you used styles={{colourStyles}} instead of styles={colourStyles}, then the app would also lose the colors. This is because it is not expanded as it should. However, styles={{...colourStyles}} would work. Read more in this post.

So this bit of code should fix your problem:

example.js

export default () => (
  <Select
    [your other props],
    styles={{
      ...colourStyles, 
      ...{control: styles => ({ ...styles, zIndex: 9999})},
    }}
  />
);

where the two objects colourStyles and {zIndex: 9999} were merged (in ES6 compatible syntax, see this post for different ways to do this). Alternatively you can just append zIndex: 9999 right behind backgroundColor: 'white' within the colourStyles constant.

Upon inspection you can see it works:

edited Nov 22 '20 at 19:27

answered Nov 19 '20 at 14:27

Matthias

45
6

It does not work unfirtunately, I would like to add the following property : `zIndex: 9999 !important` but I don't know how to do this .... – Peter Nov 19 '20 at 20:44
It does work, see [this Sandbox](https://codesandbox.io/s/zindextest-iwf15?file=/example.js). If you inspect the element you will indeed see that the `z-index` was modified accordingly. So why would you want to use `!important`? – Matthias Nov 22 '20 at 19:39

How can I set the z-index for this select?

1 Answers1