スタイリングアクティブ状態のブートストラップコンポーネントをスタイリング

Question

React Bootstrap Navbarのスタイルを設定しようとしています。私は正常に非アクティブなタブをスタイルすることができましたが、私はアクティブなタブに到達することはできません。 私のスタイルのライブは別の.scssファイルです。ここでは、関連するスニペットがあります：アクティブなブートストラップ・コンポーネントが作成されると

.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は次のようになります。

<Nav 
      className={styles.navbar} 
      bsStyle="pills" 
      activeKey={this.state.value} 
      onSelect={this.handleSelect} 
      > 
      <NavItem className={styles.navitem} eventKey="1">Preview</NavItem> 
      {navItem} 
</Nav> 

：

<li role="presentation" class="Preview-navitem--19fA7 active"><a role="button" href="#">Preview</a></li> 

ここで反応するrender（）メソッド内のHTMLです

それで、基本的に、私は.navitemをスタイルすることができますが、.activeは作成しません。 どのように私はこれを達成することができましたか？

Answer 1

貼り付けられたコードに基づいているようなCSSモジュールであると仮定すると、解決策はグローバルセレクタを使用することです。 CSSモジュールではREADMEページのExceptionsに簡単に触れています。ただし、webpack demoにはglobal selector exampleがあります。クローンして再生することができます。

は一言で言えば、あなたは変更する必要があります。

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

へ：

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

ために、それはWebPACKので適切に処理されるため。これがすべて必要なはずです！