使用 webpack 更改 react-bootstrap 导航栏的文本颜色

Posted 2023-02-22

【中文标题】使用 webpack 更改 react-bootstrap 导航栏的文本颜色

【英文标题】：Changing the text color of a react-bootstrap Navbar using webpack

【发布时间】：2017-04-02 20:43:02

【问题描述】：

我是 Web 开发的新手，我正在尝试自定义 react-bootstrap 导航栏的颜色。

这是我的 NavbarComponent.cs 文件的内容：

var React = require('react');
var ReactDOM = require('react-dom');

import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import Button from 'react-bootstrap/lib/Button';
import styles from './Navbar.css'

export default class NavigationBar extends React.Component 

  render() 
    return (
      <Navbar brand="react-bootstrap" className=styles.navbar>
        <Nav bsStyle="tabs" activeKey="1" onSelect=    this.handleSelect>
          <NavItem className=styles.navitem eventKey=1 href="#">Thing 1</NavItem>
          <NavItem className=styles.navitem eventKey=2 href="#">Thing 2</NavItem>
        </Nav>
      </Navbar>
    );
  

这是我的 css 覆盖文件 Navbar.css：

:local(.navbar) 
  background:#2E5F91;
  color:white !important;


:local(.navitem) 
  color:white !important;

导航栏的背景颜色改变得很好，但我无法改变文本颜色，即使使用!important 标签（我知道这很危险）。

查看结果页面中的元素：

<li role="presentation" class="BV2R0XKa1lLedUhy9CO2p" data-reactid=".1.1.0.0.$/=10">
  <a href="#" role="button" data-reactid=".1.1.0.0.$/=10.0">Thing 1</a>
</li>

看来我的课程还不够深入。我该如何解决这个问题？

谢谢！

【参考方案1】：

欢迎来到网络开发，希望你和我们一样喜欢！

我不熟悉css伪类:local，我很好奇为什么不使用通常的css类？

.navItem 
  color: white;

我认为组件 NavItem 没有 className 属性 （来源：https://react-bootstrap.github.io/components.html#navs-props-navitem）

所以也许这就是它不起作用的原因，但不确定......我会这样做：

<NavItem eventKey=2 href="#">
  <span className="navItem">Thing 2</span>
</NavItem>

这是一个 jsfiddle：http://jsfiddle.net/u4g5x93w/1/

【讨论】：

:local 和 :global 是较新的伪类，表示使用的 CSS 选择器的范围。这是将关注点分离到模块中的一种非常好的方法，这里有一篇关于主题medium.com/seek-developers/…

的精彩文章

【参考方案2】：

你可以通过放置来解决这个问题

<link rel="stylesheet" href="../Navbar.css">

到您项目中的 index.html。并在 index.html 中给出 Navbar.css 的具体路径。然后编辑你喜欢的。

【参考方案3】：

<Navbar collapseOnSelect expand="lg" bg="light" variant="light" >