更改文本颜色使用的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>
它看起来像我的课没有得到足够深。我怎样才能解决这个问题?
谢谢!
答
欢迎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/
答
可以解决这个b题y把
<link rel="stylesheet" href="../Navbar.css">
添加到项目中的index.html。并且在index.html中给出Navbar.css的具体路径。然后编辑你喜欢的东西。
':local'和':global'是其表示CSS选择所使用的较新的范围伪类。这是将问题分为模块的一种非常好的方式,下面是关于该主题的精彩文章。https://medium.com/seek-developers/the-end-of-global-css-90d2a4a06284#.oehp2f673 – deiga