reactjs - react-bootstrap 无法正确渲染

Question

我正在渲染一个模态组件，我得到了这个： image

为什么 xClose 按钮​​看起来像这样？

这是我的模态组件：

import { Button, Modal } from 'react-bootstrap'

const TodoPopup = (props : {show : boolean, onHide : () => void} ) => {
    return (
        <Modal
      {...props}
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          This is a modal example
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
    );
};

export default TodoPopup;

我从这里的文档中复制并粘贴：react-bootstrap 文档

标签： reactjsreact-bootstrap

Answer 1

修复了它，我降级了我的引导版本以匹配我的 react-bootstrap 版本。