在活动状态下设置React Bootstrap组件
问题描述:
我正在尝试设置React Bootstrap导航栏的样式。我能够成功地设置非活动选项卡的样式,但是,我似乎无法触及活动选项卡。 我的生活风格是一个单独的.scss文件。下面是相关的代码片段:在活动状态下设置React Bootstrap组件
.navitem {
a {
font-size: 12px;
color: #000;
background-color: #e7e7e7;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-bottom-color: #357ebd;
border-bottom-style: solid;
border-radius: 0px !important;
display: inline-block;
border-bottom-width: 2px;
}
flex: 1;
}
.navitem.active {
background-color: #777777;
}
当创建一个积极的引导部件,它的HTML看起来像这样:
<li role="presentation" class="Preview-navitem--19fA7 active"><a role="button" href="#">Preview</a></li>
这里的反应渲染()方法中的HTML:
<Nav
className={styles.navbar}
bsStyle="pills"
activeKey={this.state.value}
onSelect={this.handleSelect}
>
<NavItem className={styles.navitem} eventKey="1">Preview</NavItem>
{navItem}
</Nav>
所以,基本上,我可以设计.navitem,但不是.active。 任何想法我可以做到这一点?
答
假设这是基于粘贴代码的CSS模块,解决方案是使用全局选择器。 CSS模块在Exceptions的README主页上简单地提到了这一点。然而,他们的webpack demo有一个global selector example你可以克隆和玩弄。
总之,你应该改变:
.navitem.active {
background-color: #777777;
}
到:
.navitem:global(.active) {
background-color: #777777;
}
,以便它可以通过的WebPack正确处理。这应该是所有需要的!
+0
令人惊叹。非常感谢你的帮助! – wonderv
你使用CSS模块或类似的东西吗?看起来你的'.navitem'已经变成了'Preview-navitem-19fA7',这意味着你的'.navitem.active'也会改变,这就是它不匹配的原因。 –
@JamesGanong,这是bootstrap的工作。 '.navitem'确实被拾取,但我似乎无法让它看到活动状态。 – wonderv
您是否将'navitem'类添加到您的'NavItem'组件中?我无法在react-bootstrap代码中的任何地方找到它添加该类的地方。我很确定发生了什么事是你的css处理正在修改你的类名,但是活动类名正在被处理器外的react-bootstrap添加到你的'li'中。所以'active'类被添加为'active',但是你的css文件对'.navitem.active'具有不同的样式名称。你可以在你的处理过的css文件中找到'.navitem.active'变成了什么? –