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

Question

我正在尝试自定义反应引导导航栏的颜色。

这是我的 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>

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

Answer 1

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

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

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

Answer 2

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

Answer 3

.navbar-nav .nav-item a {
  color: white !important;
}

Answer 4

我不熟悉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/