在活动状态下设置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。任何想法我可以做到这一点？

来源

2017-03-16 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'变成了什么？ –

假设这是基于粘贴代码的CSS模块，解决方案是使用全局选择器。 CSS模块在Exceptions的README主页上简单地提到了这一点。然而，他们的webpack demo有一个global selector example你可以克隆和玩弄。

总之，你应该改变：

.navitem.active { 
    background-color: #777777; 
}

到：

.navitem:global(.active) { 
    background-color: #777777; 
}

，以便它可以通过的WebPack正确处理。这应该是所有需要的！

来源

2017-03-23 00:42:24

令人惊叹。非常感谢你的帮助！ – wonderv

在活动状态下设置React Bootstrap组件

回答

相关问题