更改文本颜色使用的WebPack

我是新来的网络发展，我想自定义的颜色反应的自举导航栏一个作出反应的自举导航栏。更改文本颜色使用的WebPack

这是我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>

它看起来像我的课没有得到足够深。我怎样才能解决这个问题？

谢谢！

来源

2016-11-18 Megan McPherson

欢迎web开发，希望你会喜欢像我们一样多！

我不熟悉:local的CSS伪类，我很好奇，为什么不能用通常的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/

来源

2016-11-18 22:38:13

'：local'和'：global'是其表示CSS选择所使用的较新的范围伪类。这是将问题分为模块的一种非常好的方式，下面是关于该主题的精彩文章。https://medium.com/seek-developers/the-end-of-global-css-90d2a4a06284#.oehp2f673 – deiga

可以解决这个b题y把

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

添加到项目中的index.html。并且在index.html中给出Navbar.css的具体路径。然后编辑你喜欢的东西。

来源

2017-03-05 09:06:14

更改文本颜色使用的WebPack

回答

相关问题