reactstrap 样式显示问题

Posted 2023-03-23

【中文标题】reactstrap 样式显示问题

【英文标题】：reactstrap style display issue

【发布时间】：2019-10-05 10:35:09

【问题描述】：

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

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

我在代码沙箱上托管了该应用程序，这里是link。我希望输入的外观与文档完全相同，但在实施时它们看起来像没有任何样式的常规输入字段。这是 reactstrap link 的文档页面。我错过了什么？

【参考方案1】：

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

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

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

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

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