css - 使用 webpack 更改 react-bootstrap Navbar 的文本颜色

Question

我是网络开发的新手，我正在尝试自定义 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>

看来我的类(class)还不够深入。我该如何解决这个问题？

谢谢!

Answer 1

欢迎来到 Web 开发，希望您会像我们一样喜欢!

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