解决方案

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链接的，样式适用于所有链接，但是对于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 className的特异性要比样式化组件className高（NavLink组件在“ nav-link”，因此不会覆盖Bootstrap CSS）。例如，className看起来像：“ sc-lhVmIH gcJAof nav-link”，其中样式组件className：“ sc-lhVmIH gcJAof”被最后应用的className“ 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>接受样式化的组件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;
      }
    }
  }
`;

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

CSS特殊性

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

Demos

点击here进行演示。

有效的代码和框（包含解决方案＃1和＃2-您只需要使用其中的一个，而不必两个都使用）：

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

1 个答案:

解决方案

CSS特殊性

Demos