React Bootstrap Dropdown component doesn't receive any styling

Question

I already installed react-bootstrap with yarn yarn add react-bootstrap bootstrap.

I am using dropdown component but when I display it, it doesn't show like it's suppose to:

This is what I need

This is my code for that

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;

I don't know why the dropdown is unstyled.

Answer 1

That's because you might not have imported the CSS in your index.html file.

You need to add something like this in your projects public/index.html file

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

OR

You can import the CSS in your App.js or index.js file like this

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

You can check more about it in the react-bootstrap docs