如何解决React Bootstrap Dropdown组件没有任何样式
我已经为react-bootstrap安装了纱线yarn add react-bootstrap 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;
我不知道为什么下拉列表没有样式。
解决方法
那是因为您可能没有将CSS导入到index.html文件中。
您需要在项目的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"
/>
OR
您可以像这样将CSS导入到App.js或index.js文件中
import 'bootstrap/dist/css/bootstrap.min.css';
您可以在react-bootstrap docs
中查看更多相关信息版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。