проблема отображения стиля реакционной ленты

Question

Я пытаюсь использовать реактивную ленту для реактивного проекта, но он не успешен. Вот код

// 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, а вот ссылка . Я ожидаю, что внешний вид входных данных будет точно таким же, как в документации, но при реализации они выглядят как обычные поля ввода без какого-либо стиля. Вот страница документации для реактивной ленты ссылка . Чего мне не хватает?

Answer 1

В документации первая страница говорит об импорте Bootstrap CSS.

Импорт начальной загрузки CSS в файл src/index.js:

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

Это дает вам стили. Предварительный просмотр здесь.

CodeSandbox: https://codesandbox.io/s/client-x8dz3