React Bootstrap Dropdown 组件没有收到任何样式答案

【问题标题】：React Bootstrap Dropdown component doesn't receive any stylingReact Bootstrap Dropdown 组件没有收到任何样式
【发布时间】：2020-12-08 19:13:34
【问题描述】：

我已经用纱线yarn add react-bootstrap bootstrap 安装了react-bootstrap。

我正在使用下拉组件，但是当我显示它时，它并没有像预期的那样显示：

这就是我需要的

这是我的代码

import React from "react";
import { Dropdown } from "react-bootstrap";
// import PropTypes from "prop-types";
import "../Dropdown/index.css";

const DropdownItem = () => {
  return (
    <Dropdown>
      <Dropdown.Toggle variant="success" id="dropdown-basic">
        Dropdown Button
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

export default DropdownItem;

我不知道为什么下拉菜单没有样式。

【问题讨论】：

您是否将核心 Bootstrap 样式表导入到 index.js？ React Bootstrap 依赖于它们。
您好像忘记在使用 webpack 时添加加载器来处理您的 css 文件？

标签： reactjs react-bootstrap

【解决方案1】：

那是因为您可能没有在 index.html 文件中导入 CSS。

您需要在项目的 public/index.html 文件中添加类似这样的内容

 <link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>

或

您可以像这样在 App.js 或 index.js 文件中导入 CSS

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

您可以在 react-bootstrap docs 中查看更多信息

【讨论】：