Bootstrap react components don't apply my CSS to the other nested components-CodePudding

I am learning react currently and decided to make a website. Currently I am using react-boostrap and I am trying to make a navbar. I want to change the font and font-color of my navbar but when I create a className for the outermost component that holds the rest of the components and apply CSS to it. It only affects my NavDropdown.items for font-size.

import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";

import "./Navbar.css";

export default function MainNavbar(props) {
  return (
    <div className="background-container">
      <Navbar fluid expand="sm" sticky="top" className="main-nav">
        <Navbar.Brand href="#home">My name</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ms-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  );
}

My CSS looks like this which currently changes the size of my font

.main-nav{
    font-size: 1.5rem !important;
}

Even though that works to change the font-size when I try to change the color of the text like so

.main-nav{
    font-size: 1.5rem !important;
    color: pink;
}

It fails to change the color even though it did succesfully change the font-size.

Let me know if you need more info.

CodePudding user response：

The difference between your font-size and color properties is "!important", so your .main-nav just has less specificity than the other rule from bootstrap. You can either add !important to your color: pink; property or you can check in dev tools what style from bootstrap sets the color and write your css rule with more specificity than the existing one. After that you can get rid of both !important