React JS：在没有 CSS 的情况下出现 React JS 模式答案

【问题标题】：Ract JS: React JS modal appearing W/O CSSReact JS：在没有 CSS 的情况下出现 React JS 模式
【发布时间】：2020-03-29 02:04:33
【问题描述】：

我是 ReactJS 的新手，React modal 出现时没有 css。

我已经附上了它的屏幕截图

下面是我正在使用的模态代码

import React, { Component } from 'react';
import  {Modal, Button} from 'react-bootstrap'

    render(){
        return (
            <Modal
            {...this.props}
            size="lg"
            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>

            <label>
              AGE:
              <input type="text" name="age" ref={this.props.setref1}/>
            </label>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={this.props.getdetails}>SUBMIT</Button>
            </Modal.Footer>
          </Modal>
        )

【问题讨论】：

标签： reactjs react-css-modules react-modal

【解决方案1】：

react-bootstrap的css你导入了吗？

import 'bootstrap/dist/css/bootstrap.min.css';

【讨论】：

【解决方案2】：

如果你仔细阅读文档，你会看到这个：Stylesheets section。

所以你要么需要添加import 'bootstrap/dist/css/bootstrap.min.css'; src/index.js 要么 App.js 文件

或添加

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

在 index.html 中

【讨论】：

【解决方案3】：

React-Bootstrap 不依赖于非常精确的 Bootstrap 版本，并且不附带任何包含的 css。但是，使用这些组件需要一些样式表。

检查这个：https://react-bootstrap.github.io/getting-started/introduction

或者添加这个：

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

【讨论】：