Question

我是网络开发的新手，我正在尝试自定义react-bootstrap 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;
}

Navbar的背景颜色变化很好，但我无法更改文本颜色，即使使用!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>

这是一个小伙伴：http://jsfiddle.net/u4g5x93w/1/

Answer 2

你可以通过

来解决这个问题

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

到项目中的index.html。并在index.html中为Navbar.css提供特定路径。然后编辑你喜欢的内容。

Answer 3

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

使用webpack更改react-bootstrap Navbar的文本颜色

3 个答案: