时间戳

首页 > 解决方案 > Ract JS：React JS 模态出现 W/O CSS

reactjs - Ract JS：React JS 模态出现 W/O CSS

问题描述

我是 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>
        )

标签： reactjsreact-css-modulesreact-modal

解决方案

如果您仔细阅读文档，您会看到：样式表部分。

因此，您需要添加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 中

推荐阅读