我是新的网页开发，我正在尝试自定义颜色的React引导导航栏。
下面是我的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>

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