我正在嘗試自定義反應引導導航條的顏色。

這是我的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;
}

導航條的背景顏色改變得很好，但是我不能讓文本顏色改變，即使使用！重要標簽(這很危險，我知道)。

查看結果頁面中的元素:

<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>

看來我的課還不夠深入。我該如何解決這個問題？

你可以通過放入

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

到你項目中的index.html。并給出Navbar.css在你的index.html中的具體路徑。然后編輯你喜歡的。

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

這里有一個小提琴:http://jsfiddle.net/u4g5x93w/1/