如何在 CSS 中选择 ReactJS 组件

Question

我正在尝试为一些 ReactJS 组件设置一些 CSS 值。

有没有办法通过组件来访问组件？

想象一下这个 ReactJS 组件：

import './assets/css/custom.css'

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" sticky="top" className="navbar-custom-main">
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mx-auto justify-content-center ">
          <Nav.Link href="#features" clas>Home</Nav.Link>
          <Nav.Link href="#pricing">Little Do you Know</Nav.Link>
          <Nav.Link href="#pricing">My Work</Nav.Link>
          <Nav.Link href="#pricing">Resume</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

如何使用 CSS 设置 Nav.Link 部分的字体颜色？

我在我的custom.css 中试过这个：

Nav Nav.Link {
color: "red"  !important;
}

而且它不起作用。有什么办法可以做到吗？

Answer 1

给组件id 或class，然后将css 添加到id/class

---

例子：

<Nav.Link className={'active'} href="#features" clas>Home</Nav.Link>

.active: {color: red;}

Answer 2

<Nav.Link> 组件实际上是作为<div/> 和<a class="nav-link"/> 元素的组合呈现的，您可以判断是否检查了元素。所以，Nav 和 Nav.Link CSS 选择器肯定不会命中这些组件。

理想情况下，给您的组件一个 id 或一个类并设置 CSS...

<Nav.Link href="#pricing" id="orange">Resume</Nav.Link>
#orange { color: "orange" };

或者：

<Nav.Link href="#pricing" className="orange">Resume</Nav.Link>
.orange { color: "orange" };

或者，如果这不起作用，你可以用蛮力的方式来做......

style = { color: "orange" };
<Nav.Link href="#pricing" style="{style}">Resume</Nav.Link>

建议使用第一种方法，因为它具有可扩展性且更易于开发。

Answer 3

您需要检查元素以找到要应用 css 的类名。

在您的情况下，React-bootstrap 组件具有 nav-link 类：

.navbar-custom-main .nav-link {
 ...
} 

Answer 4

Nav.Link 是你写的组件吗？

如果您编写了组件，请编辑组件的代码，而不是使用类和嵌套的 CSS 选择器从外部对其进行样式设置。

如果组件是从库中导入的并且您想要编辑它（不编辑 node_modules 文件），您可以检查 Nav.Link 组件正在呈现的 HTML 元素。它可能有 CSS 类，您可以使用自定义 CSS 进行修改。

我在 Ant Design 库中使用的其他选项（样式可能有点棘手）是 Styled Components，它制作了一个自定义组件，该组件用 styled-components div 包装库组件，根据需要设置样式并导入我的自定义组件而不是库之一。

Answer 5

您也可以使用 Ctrl F... 找到导航链接... 替换 Nav.Link className="orange"...

您可以轻松找到所有实例并替换它们。希望这会有所帮助:)