React-Select & React-Flow重叠

Question

我正在为一个项目使用React-Select和React-Flow (https://reactflow.dev/)。不幸的是，这两者是重叠的，使得我的react-select下拉菜单不可用。我没有编辑css，所以我认为代码没有帮助，不管怎样，它很容易用下面的代码重现。还附上了一张图片的效果。

有没有办法强制在顶部使用React-Select div？我尝试使用z-index，但似乎没有产生正确的结果。

import React from 'react';
import ReactFlow from 'react-flow-renderer';
import Select from 'react-select';

export default const Bug = () => {
    return(
        <div>
            <Select options={[{value:1, label:'option A'}, {value:2, label:'option B'}]}/>
            <ReactFlow/>
        </div>
    )
}

​

​

Answer 1

感谢@Shmili Breuer！

手动添加一个高于React Flow中的z-index的z-index到包含react-select的div中，解决了我的问题！

<Card>
    <Card.Header className='z10'/>
        <Select .../>
    </Card.Header>
    <Card.Body>
        <ReactFlow/>
    </Card.Body>
</Card>

.z10 {
    z-index: 10;
}