如何解决如何使用react-bootstrap组件和react-select菜单解决z-index问题?
我正在使用react-select和react-bootstrap,并且遇到以下问题。我创建了一个引导卡,里面有一个反应选择,问题是当我打开反应选择菜单时,该菜单没有完全显示。我尝试将z-index值和位置更改为相对,但未更改。 这是我的问题的图片: 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;
解决方法
使用menuPortalTarget
prop将您的react-select呈现到文档的根目录中。问题是您的react-select正在呈现到具有overflow: hidden
的特定堆叠上下文中。通过渲染到正文中,可以确保没有包装上下文切断您的内容:
<Select menuPortalTarget={document.body} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。