样式组件不适用于层次结构选择器

Question

我正在学习使用样式化组件，但看起来当我瞄准 css classes in hierarchy 时，它似乎并没有 work.Here 我正在使用我想应用一些样式每当在导航 link 上使用悬停时。这是我的导航栏代码：

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 links 设计的，适用于所有 links，但颜色只改变为 white对于 A link.But 的形式，其他背景、边框正在改变，但 link color.Here 的行为不变：当我使用以下代码时： .navbar-light .navbar-nav .nav-link &:hover { color: white; } 在一个正常的 css 文件中而不使用样式化的组件我得到了很好的预期 behavior.For 解决我试图使用 sass 做的方式我的样式组件的定义如下：

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

但是我无法changes.How 使所有 link 的文本变成白色 styled-compont 定义？

Answer 1

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

解决方案

只需在样式化的 NavLink 中添加 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;
  }
`;

在导航中，<NavBar className={className}>...</NavBar> 接受样式化的组件类名，添加以下 css 以覆盖 Bootstrap CSS 样式表：

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

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

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

CSS特异性

下面是如何将 CSS 特异性应用于 DOM:

演示

单击 here 查看工作演示。

工作 codesandbox（包含解决方案 #1 和 #2 -- 你只需要使用其中的一个，而不是两个）：

样式组件不适用于层次结构选择器

styled component doesn't work with hierachy selectors

css

sass

reactjs

styled-components

解决方案

CSS特异性

演示