为什么我的react-bootstrap模态组件显示如此？

Posted 2023-02-02

在我的下一个React应用程序的开发过程中，我不得不使用react-bootstrap中的模态组件。它实际上工作正常，但看起来没有导入样式表？ 这是我的代码

import React from "react";
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';

class Nav extends React.Component 
    constructor(props, context) 
      super(props, context);

      this.handleShow = this.handleShow.bind(this);
      this.handleClose = this.handleClose.bind(this);

      this.state = 
        show: false,
      ;
    

    handleClose() 
      this.setState( show: false );
    

    handleShow() 
      this.setState( show: true );
    

    render() 
      return (
        <>
          <nav>
            <h5>a pack of free css animations</h5>
            <ul>
             <li><button variant="primary" onClick=this.handleShow>how to use ></button></li>
              <li>
                <form method="get" action="file">
                 <button type="submit">download ></button>
               </form>
              </li>
              <li><a href=".">see on github ></a></li>
            </ul>
          </nav>

          <Modal
          show=this.state.show
          onHide=this.handleClose
          aria-labelledby="ModalHeader"
          >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">How to use?</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>Once you downloaded <i>animation.min.css</i>, you have to link that to your project.<br />
              To do that, use a 'link' tag, or just copy code of animation you like.</p>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick=this.handleClose>
                Close
            </Button>
          </Modal.Footer>
        </Modal>
        </>
      );
    
  

export default Nav;

它看起来像（Chrome）Click me

模态显示在底部，文本不居中等... 你怎么看？ 如何改善？

答案

你缺少react-bootstrap的样式表，这就是模型没有正确设置样式的原因。将以下内容添加到您的html中，它应该可以工作。

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

请通过link集成您的应用程序并使用react-bootstrap。

另一答案

从react-bootstrap加载样式，如下所示：

https://react-bootstrap.github.io/getting-started/introduction/