如何设置此选择的 z-index？

Question

您好，我想设置以下组件的 z-index：

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}
  />
);

我找到了这个解决方案：

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

而不是

styles={colourStyles}

但我失去了所有的颜色......

你能帮帮我吗？

代码如下：

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

非常感谢！

Answer 1

请注意，如果您使用styles={{colourStyles}} 而不是styles={colourStyles}，那么应用程序也会失去颜色。这是因为它没有按应有的方式扩展。但是，styles={{...colourStyles}} 会起作用。在this post 中阅读更多内容。

所以这段代码应该可以解决你的问题：

example.js

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

colourStyles 和 {zIndex: 9999} 两个对象被合并的地方（在 ES6 兼容的语法中，请参阅 this post 了解不同的方法）。或者，您可以在 colourStyles 常量内将 zIndex: 9999 附加在 backgroundColor: 'white' 后面。

经过检查，您可以看到它有效：