reactstrap 样式显示问题

Question

我正在尝试将 reactstrap 用于 React 项目但未成功。这是代码。

// React
import React, { Component } from "react";

import {
  Card,
  CardBody,
  CardTitle,
  Row,
  Col,
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  Input
} from "reactstrap";

// Style
import "./App.scss";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Card>
          <CardBody>
            <CardTitle>Badges Scale to Parent</CardTitle>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>
                  <Input
                    addon
                    type="checkbox"
                    aria-label="Checkbox for following text input"
                  />
                </InputGroupText>
              </InputGroupAddon>
              <Input placeholder="Check it out" />
            </InputGroup>
            <input placeholder={"email"} />
            <input placeholder="name" />
            <input placeholder="mail" />
            <button>Send</button>
          </CardBody>
        </Card>
      </div>
    );
  }
}

我已经在 codesandbox 上托管了应用程序，这里是 link. I am expecting the look of the inputs to be exactly as the documentation but when implemented they look like regular input fields without any style. Here is the documentation page for reactstrap link。我错过了什么？

Answer 1

在文档中，first page 说要导入 Bootstrap CSS。

在 src/index.js 文件中导入 Bootstrap CSS:

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

这为您提供了样式。在这里预览。

代码沙箱：https://codesandbox.io/s/client-x8dz3

reactstrap 样式显示问题

reactstrap style display issue

javascript

sass

reactjs

reactstrap