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>
    );
  }
}

我已将应用托管在codeandbox上，这里是link。我希望输入的外观与文档完全一样，但是在实现时，它们看起来像没有任何样式的常规输入字段。这是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