styled component doesn't work with hierachy selectors

Question

I'm learning to use styled components,but it looks like when i target css classes in hierarchy,it doesn't seem to work.Here i'm using i would like to make apply some styles wheneve use hovers on navigations links. Here is my navbar code :

import React from "react";
import { Nav, Navbar } from "react-bootstrap";
import Flag from "../common/Image";
import styled from "styled-components";
import NavLink from "../common/NavLink";

const imageURL = "/static/img/abc.png";

const Navigation = ({ className }) => {
  return (
    <Navbar className={className} collapseOnSelect expand="lg" variant="light">
      <Navbar.Brand href="#home">
        <Flag imageSource={imageURL} size={[80, 70]} />
      </Navbar.Brand>
      <NavLink linkName="A" URL={"#"} />
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mr-auto">
          <NavLink linkName="B" URL={"#a"} />
          <NavLink linkName="C" URL={"#b"} />
          <NavLink linkName="D" URL={"#b"} />
        </Nav>
        <Nav>
          <NavLink linkName="Espace de discussion" URL={"#discussions"} />
          <NavLink linkName="Contactez-nous" URL={"#contact"} />
          <Nav.Link>
            <i clasName="fas fa-envelope" />
          </Nav.Link>
          <Nav.Link>
            <i className="fas fa-bell" />
          </Nav.Link>
          <Nav.Link>
            <i className="fas fa-user-circle" />
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

export default styled(Navigation)`
  background-color: white;
  border-bottom: 1px solid #e4e8f0;
`;

And my NavLink component

import React from "react";
import styled from "styled-components";
import { Nav } from "react-bootstrap";
import PropTypes from "prop-types";

const NavLink = ({ linkName, URL, className }) => {
  return (
    <Nav.Link className={className} href={URL}>
      {linkName}
    </Nav.Link>
  );
};

NavLink.PropTypes = {
  linkName: PropTypes.string,
  URL: PropTypes.string
};



export default styled(NavLink)`
  cursor: pointer;
  color: green;
  transition: 0.4s linear;
  padding: 10px;
  &:hover {
    color: white;
    font-size: 90;
    background-color: #2e384d;
    border-radius: 10px;
  }

  .navbar-light .navbar-nav .nav-link &:hover {
    color: white;
  }
`;

I the bellow gif,the animation is for changind links styled is working for all the links,but the color is only changing to white for the A link.But the form other background,border are changing but not the link color.Here the behaviour: When i use the following code : .navbar-light .navbar-nav .nav-link &:hover { color: white; } in a normal css file without using styled component i get the good the exptected behavior.For solving i tried to use sass way of doing in the definition of my styled component like this :

.navbar-light {
    .navbar-nav {
      .nav-link {
        &:hover {
          color: white;
        }
      }
    }
  } 

But nothing changes.How can i do for making all links text become white with styled-compont definition?

Answer 1

Alright, because of how <Nav> is wrapping your <NavLink>, the nav-link className has a higher specificity than your styled component className (the NavLink component is applying the styled component className before "nav-link" and, as a result, doesn't override the Bootstrap CSS). For example, the className looks like: "sc-lhVmIH gcJAof nav-link", where the styled component className: "sc-lhVmIH gcJAof" is being overridden by the last applied className "nav-link". There are several solutions to fix this, as shown below.

---

Solutions

1. Simply add color: white !important; in the styled NavLink:

export default styled(NavLink)`
  cursor: pointer;
  color: green;
  transition: 0.4s linear;
  padding: 10px;
  border-radius: 10px;

  &:hover {
    color: white !important;
    font-size: 90;
    background-color: #2e384d;
    border-radius: 10px;
  }
`;

2. In Navigation, where <NavBar className={className}>...</NavBar> accepts a styled component className, add the following css to override the Bootstrap CSS stylesheet:

export default styled(Navigation)`
  background-color: white;
  border-bottom: 1px solid #e4e8f0;

  &.navbar-light {
    & .navbar-nav {
      & .nav-link:hover {
        color: white;
      }
    }
  }
`;

3. Import the Bootstrap less into a less file and override the nav-link:hover className.

---

CSS Specificity

Here's how the CSS specificity is being applied to the DOM:

---

Demos

Click here for a working demo.

Working codesandbox (contains solution #1 and #2 -- you'll only need to use one of them, not both):