样式的组件不适用于分层选择器

Question

我正在学习使用样式化的组件，但是当我将css classes in hierarchy目标时，它似乎无法正常工作。在这里，我正在使用在导航链接上使用鼠标悬停时要应用一些样式的方法。 这是我的导航栏代码：

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;
`;

还有我的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;
  }
`;

在下面的gif ，动画是针对changind链接的，样式适用于所有链接，但是A链接的颜色仅变为white 。但是其他背景，边框的形式却在改变，但链接颜色没有改变。 ： 当我使用以下代码时： .navbar-light .navbar-nav .nav-link &:hover { color: white; } .navbar-light .navbar-nav .nav-link &:hover { color: white; }在一个正常css ，而不使用样式的组件文件，我得到了很好的exptected behavior.For解决我试图用sass ，我喜欢这个样式的组件的定义做的方式：

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

但是什么也没有改变。如何使所有链接文本变为带有styled-compont定义的白色？

Answer 1

好吧，由于<Nav>如何包装<NavLink> ，所以nav-link className的特异性比样式化组件className更高（NavLink组件在“ nav-link”之前应用样式化组件className，结果，不会覆盖Bootstrap CSS）。 例如，className看起来像：“ sc-lhVmIH gcJAof nav-link”，其中样式组件className：“ sc-lhVmIH gcJAof”被最后应用的className“ nav-link”覆盖。 有多种解决方案可以解决此问题，如下所示。

---

解决方案

1. 只需添加color: white !important; 在样式化的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. 在导航中， <NavBar className={className}>...</NavBar>接受样式化的组件className，添加以下css以覆盖Bootstrap CSS样式表：

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

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

3. 将较少的Bootstrap导入较少的文件中，并覆盖nav-link:hover className。

---

CSS特异性

这是CSS特定性如何应用于DOM的方法 ：

---

演示

单击此处查看有效的演示。

工作的codeandbox（包含解决方案＃1和＃2-您只需要使用其中之一，而不必同时使用）：