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

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 !

Answer 1

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: