javascript - 如何以反应日历组件不重叠的方式更改反应选择下拉菜单中的zIndex？以前的问题没有用

Question

我尝试了上一个问题中写的所有内容，问题是选择下拉列表位于另一个名为“select ...”的输入字段后面，该字段也来自另一个库：react-modern-calendar-date-picker。不知道为什么不起作用，我还尝试创建另一个 css 页面并添加到选择自定义类但也不起作用。到目前为止，这是我的代码：

import { useContext, useEffect, useState } from 'react';
// styled components
import styled from 'styled-components';

// select input
import Select, { NonceProvider } from 'react-select';
import { Context } from '../../../Context/Context';

const FirstContext = ({ text, options, contextId, selected, value, index }) => {
  const [treeNodeNames, setTreeNodeNames] = useState([]);
  const [context, setContext] = useState();
  const { setContexts, setMandatoryContext } = useContext(Context);

  console.log('value first context', value);
  useEffect(() => {
    setContext(value);
  }, [value]);

  useEffect(() => {
    if (context) {
      setContexts((prev) => [
        ...prev.filter((el) => el.name !== text),
        context,
      ]);
    }
  }, [context]);

  useEffect(() => {
    if (index === 0 && context) {
      setMandatoryContext(context);
    }
  }, [context]);

  // console.log("clean - state",context)

  // clean one context when selected change
  useEffect(() => {
    if (treeNodeNames[0]) {
      console.log('Ordre marco', context);
    }
  }, [treeNodeNames, context]);

  useEffect(() => {
    setContext(undefined);
  }, [selected]);

  // const options = [
  //   { value: 'chocolate', label: 'Chocolate' },
  //   { value: 'strawberry', label: 'Strawberry' },
  //   { value: 'vanilla', label: 'Vanilla' },
  // ];

  // THIS IS FROM THE LIBRARY
  const customStyles = {
    option: (provided, state) => {
      // console.log("state", state);

      return {
        ...provided,
        borderBottom: '1px solid #f8f8f8',
        color: 'black',
        backgroundColor: 'white',
        '&:hover': {
          backgroundColor: '#f8f8f8',
          color: 'black',
        },
        menuPortal: (provided) => ({ ...provided, zIndex: 9999 }),
        menu: (provided) => ({ ...provided, zIndex: 9999 }),
        // textAlign: 'right',
      };
    },
    control: (styles) => ({
      ...styles,

      '&:hover': {
        border: '1px solid rgba(18, 18, 18, 0.3)',
        // border: 'none',
      },
      // border: 'none',
      border: '1px solid rgba(18, 18, 18, 0.1)',
      boxShadow: 'none',
      // textAlign: 'right',
      padding: '10px',
      borderRadius: '10px',
    }),
    singleValue: (provided, state) => {
      const opacity = state.isDisabled ? 0.5 : 1;
      const transition = 'opacity 300ms';

      return { ...provided, opacity, transition };
    },
    placeholder: (provided) => {
      return { ...provided };
      // return { position: 'absolute', right: 5 };
    },
    indicatorSeparator: (provided) => {
      return {
        indicatorSeparator: null,
      };
    },
    dropdownIndicator: (provided) => {
      return {
        ...provided,
        color: '#46AA8A',
        '&:hover': {
          color: 'rgba(20, 97, 101, 255)',
        },
      };
    },
    input: (provided) => {
      return {
        ...provided,
      };
    },
  };

  useEffect(() => {
    if (options) {
      const treeNodes = options.data.findTreeNodesByTree.map((element) => {
        return {
          name: text,
          value: element.name,
          label: element.name,
          id: element._id,
          selection: element._id,
          context: contextId,
          custom: null,
        };
      });

      setTreeNodeNames(treeNodes);
    }
  }, [options]);

  console.log('individual context', context);
  return (
    <ContextContainer>
      <ContextTitle>
        <p>{text}</p>
      </ContextTitle>
      {treeNodeNames && (
        <SearchInput>
          <Select
            onChange={
              index === 0 ? (e) => setMandatoryContext(e) : (e) => setContext(e)
            }
            placeholder="Select"
            value={value || context}
            options={treeNodeNames}
            styles={customStyles}
            isSearchable
            isClearable
          />
        </SearchInput>
      )}
    </ContextContainer>
  );
};

// STYLES
const ContextContainer = styled.div`
  display: flex;
  margin-left: auto;
  /* flex-direction: column; */
  align-items: center;
  justify-content: space-between;
  /* text-align: end; */
  /* border-bottom: 0.5px solid #d8d8d8; */
`;

const ContextTitle = styled.div`
  display: flex;
  /* width: 75%;  */
  align-items: center;
  justify-content: space-between;
`;
const SearchInput = styled.div`
  width: 30vw;
  padding: 10px 0px 10px 20px;
  outline: black;
  margin-right: 40px;
`;

export default FirstContext;

标签： javascriptreactjsreact-select

Answer 1

尝试zIndex直接设置menu而不是嵌套在里面option

const customStyles = {
    option: (provided, state) => {
      // console.log("state", state);

      return {
        ...provided,
        borderBottom: '1px solid #f8f8f8',
        color: 'black',
        backgroundColor: 'white',
        '&:hover': {
          backgroundColor: '#f8f8f8',
          color: 'black',
        }
      };
    },
    menu: (provided, state) => {
      return { 
        ...provided,
        zIndex: 9999
      }
    }