使用webpack更改react-bootstrap导航栏的文本颜色

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>

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

- Megan McPherson

Answer 1

<Navbar collapseOnSelect expand="lg" bg="light" variant="light" >

- ashish bindra

Answer 2

.navbar-nav .nav-item a {
  color: white !important;
}

- Mourad Labrahmi

Answer 3

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

- Vincent Taing

---

:local和:global是新的伪类，用于表示CSS选择器的作用域。这是将关注点分离为模块的一种非常好的方式，这里有一篇关于这个主题的优秀文章https://medium.com/seek-developers/the-end-of-global-css-90d2a4a06284#.oehp2f673 - deiga

Answer 4

你可以通过放置代码来解决这个问题

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

将Navbar.css的具体路径添加到您项目中的index.html文件中，然后编辑您喜欢的内容。

- Pawan Bhusal