使用 styled-components 使 React Bootstrap Modal 居中答案

【问题标题】：Use styled-components to center React Bootstrap Modal使用 styled-components 使 React Bootstrap Modal 居中
【发布时间】：2021-07-15 04:57:39
【问题描述】：

是否可以使用 styled-component 创建一个包含 React Bootstrap 的 Modal 组件的包装容器，以使模态框水平和垂直对齐？

尝试创建CenteredModal 容器，如图所示，但.modal 元素似乎没有应用新样式。

import { Modal } from "react-bootstrap";
import styled from 'styled-components';

const CenteredModal = styled.div`
    & .modal {
        display: flex !important;
        align-items: center;
    }
`

interface MyModalProps {
    isOpen: boolean,
    onHide: () => void
}

export default function MyModal({
    isOpen = false,
    onHide,
}: MyModalProps) {
    return (
        <CenteredModal>
            <Modal show={isOpen} onHide={onHide}>
                <h1>Hello</h1>
            </Modal>
        </CenteredModal>
    )
}

【问题讨论】：

模型使用位置固定，不受周围组件影响。

标签： javascript css reactjs typescript styled-components

【解决方案1】：

因为react-bootstrap的Modal不在CenteredModal里面渲染，所以你的style不会影响它（可以打开浏览器开发者工具查看，应该是渲染在html body的底部而不是CenteredModal里面div 元素）。

我看到 react-bootstrap 已经提供了居中的方法，这是你想要的吗？你可以看看https://react-bootstrap.github.io/components/modal/

【讨论】：

【解决方案2】：

为什么不使用 centered 道具？示例：

<Modal
  size="lg"
  centered
>

【讨论】：

【解决方案3】：

您的新容器只需稍作调整：

const CenteredModal = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
`

【讨论】：