reactstrap 模态显示为纯文本

Question

我使用 reactstrap Modal，但不知何故，当 isOpen 为真时，模态仅显示为纯文本，而不是 window 上方显示的框。当我将相同的模态代码用于运行新组件时，模态仍按原样呈现，因此它不是 CSS。我应该如何修改我的 Modal

function App() {
  const [people, setPeople] = useState(data);
  const [modalOpen, setModalOpen] = useState(false);

  const toggle = () => {
    setModalOpen(!modalOpen);
    console.log(modalOpen)
  }
  return (

    <main>
      <section className="container">
        <h3>
          {people.length} birthday today
        </h3>
        <List people={people} />
        <button onClick={() => setPeople([])}>
          Clear All
        </button>
        <button onClick={() => setModalOpen(!modalOpen)}>
          Add birthday
        </button>
        <Modal isOpen={modalOpen} toggle={toggle} className="modal">
          <ModalHeader toggle={toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </section>
    </main>
  )
}

Answer 1

您必须像这样导入 bootstrap 样式表 import "bootstrap/dist/css/bootstrap.min.css";（如果没有则安装 bootstrap）并从中删除 modal class 名称Modal 组件。 Here's CSB example

reactstrap 模态显示为纯文本

reactstrap Modal appearing as plain text

reactjs

reactstrap