webpackを使用して反応起動ストラップNavbarのテキストの色を変更する

Question

私はWeb開発に慣れていないため、反応起動ストラップNavbarの色をカスタマイズしようとしています。

これは私の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

ウェブ開発へようこそ。

私は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/

Answer 2

あなたはこの問題bを解くことができますプロジェクト内のindex.htmlに

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

を入力してください。また、index.htmlにNavbar.cssの特定のパスを指定します。好きなものを編集してください。