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

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，动画是用于更改链接样式的，适用于所有链接，但颜色仅更改为white 用于A 链接。但其他背景的形式，边框正在改变但不是链接颜色。这里的行为： 当我使用以下代码：.navbar-light .navbar-nav .nav-link &:hover { color: white; } 在普通的css 文件中不使用样式化组件时，我得到了良好的预期行为。为了解决问题，我尝试使用sass 的方式来定义我的样式化组件，如下所示：

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

但没有任何改变。我怎样才能使所有链接文本变成带有styled-compont 定义的白色？

Answer 1

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

---

解决方案

1. 只需在样式导航链接中添加color: white !important;：

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

1. 在 Navigation 中，<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;
      }
    }
  }
`;

1. 将 Bootstrap less 导入 less 文件并覆盖 nav-link:hover className。

---

CSS 特性

以下是 CSS 特性应用于 DOM 的方式：

---

演示

点击here查看工作演示。

工作代码和框（包含解决方案 #1 和 #2 - 您只需要使用其中一个，而不是同时使用两者）：