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！

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

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

.z10 {
    z-index: 10;
}

React-Select 和 React-Flow 重叠

React-Select & React-Flow overlapping

reactjs

react-select