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

Question

我正在学习使用样式化组件，但看起来当我以 层次结构中的 css 类为目标 时，它似乎不起作用。我在这里使用我想应用某些样式有时会在导航链接上使用悬停。这是我的导航栏代码:

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 组件

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 中，动画是用于更改样式的链接，适用于所有链接，但对于 A，颜色仅更改为 white 链接。但其他背景、边框的形式正在改变，但链接颜色没有改变。这里的行为是: 当我使用以下代码时:.navbar-light .navbar-nav .nav-link &:hover {
白颜色;
} 在不使用样式化组件的普通 css 文件中，我得到了良好的预期行为。为了解决这个问题，我尝试在定义中使用 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)。例如，类名看起来像:“sc-lhVmIH gcJAof nav-link”，其中样式化的组件类名:“sc-lhVmIH gcJAof”被最后应用的类名“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;
  }
`;

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

1. 将 Bootstrap less 导入到 less 文件中并覆盖 nav-link:hover类名。

---

CSS 规范

这是将 CSS 特性应用于 DOM 的方式:

---

演示

点击here用于工作演示。

Working codesandbox(包含解决方案#1 和#2——你只需要使用其中的一个，而不是两者):