使用 webpack 更改反應引導導航欄的文本顏色

Question

我是 web 開發的新手，我正在嘗試自定義 react-bootstrap Navbar 的 colors。

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

你可以通過放置來解決這個問題

<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

歡迎來到 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/