如何使用 react-bootstrap 组件和 react-select 菜单解决 z-index 问题？

Question

我正在使用 react-select 和 react-bootstrap，我遇到了以下问题。我创建了一个 bootstrap 卡片，里面有一个 react-select，问题是当我打开 react-select 菜单时，这个菜单没有完全显示。我尝试将 z-index 值和位置更改为 relative 但没有任何改变。这是我的问题的图片： Image

import React from "react";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import MonthSelect from "../../../selects/MonthSelect";

import Container from "react-bootstrap/Container";
import Accordion from "react-bootstrap/Accordion";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";

const FeeSearch = props => {
  const { register } = props;

  return (
    <>
      <Accordion>
        <Card border="secondary">
          <Card.Header style={{ padding: "5px" }}>
            <Accordion.Toggle as={Button} variant="link">
              <h6>Búsqueda</h6>
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse in={true}>
            <Card.Body>
              <Container fluid>
                <Form.Group>
                  <Row>
                    <Col xs={3}>
                      <Form.Label>Mes</Form.Label>
                      <MonthSelect register={register} />
                    </Col>
                  </Row>
                </Form.Group>
              </Container>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </>
  );
};

export default FeeSearch;

Answer 1

使用 menuPortalTarget prop 将您的 react-select 呈现到文档的根目录中。问题是您的 react-select 被渲染到具有 overflow: hidden 的特定堆叠上下文中。通过渲染到正文中，您可以确保没有包装上下文切断您的内容：

<Select menuPortalTarget={document.body} />

如何使用 react-bootstrap 组件和 react-select 菜单解决 z-index 问题？

How can I solve a z-index ploblem with react-bootstrap component and react-select menu?

z-index

reactjs

react-bootstrap

react-select