reactjs – Bootstrap react parts do not apply my CSS to the opposite nested parts

I’m studying react presently and determined to make a web site. Presently I’m utilizing react-boostrap and I’m making an attempt to make a navbar. I wish to change the font and font-color of my navbar however after I create a className for the outermost part that holds the remainder of the parts and apply CSS to it. It solely impacts my NavDropdown.objects 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 perform MainNavbar(props) {
  return (
    <div className="background-container">
      <Navbar fluid increase="sm" sticky="prime" className="main-nav">
        <Navbar.Model href="#residence">My title</Navbar.Model>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ms-auto">
            <Nav.Hyperlink href="#residence">House</Nav.Hyperlink>
            <Nav.Hyperlink href="#hyperlink">Hyperlink</Nav.Hyperlink>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Merchandise href="#motion/3.1">Motion</NavDropdown.Merchandise>
              <NavDropdown.Merchandise href="#motion/3.2">
                One other motion
              </NavDropdown.Merchandise>
              <NavDropdown.Merchandise href="#motion/3.3">One thing</NavDropdown.Merchandise>
              <NavDropdown.Divider />
              <NavDropdown.Merchandise href="#motion/3.4">
                Separated hyperlink
              </NavDropdown.Merchandise>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  );
}

My CSS seems like this which presently modifications the scale of my font

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

Regardless that that works to vary the font-size when I attempt to change the colour of the textual content like so

.main-nav{
    font-size: 1.5rem !vital;
    coloration: pink;
}

It fails to vary the colour though it did succesfully change the font-size.

Let me know if you happen to want extra information.