反応起動ストラップのNavbarコンポーネントのアイコンバーのスタイルを設定するにはどうすればよいですか？

Question

私はbackground-color: white;を持つように反応し、ブートストラップのNavbarコンポーネントのicon-barのスタイルにしたいです。しかし、私のwebpackのscssローダーはCSSクラスのスタイルをダッシュ​​で許可していないので、私はラクダのケースしか使用できません。これは私のwebpack設定です：

{ test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' }, 

私はこの設定を変更したくないです。代わりに私はJSXを変更したいので、icon-bar要素にカスタムクラスを付けることができます。これはどうすればいいですか？

Home.scss

.navbar { 
    .icon-bar {} 
} 

Home.js

<Navbar fixedTop fluid className={styles.navbar}> 
      <Navbar.Header> 
      ... 
      </Navbar.Header> 

      <Navbar.Collapse eventKey={0}> 
      <Nav navbar className="navbar-right"> 
       <LinkContainer to="/how-it-works"> 
       <NavItem eventKey={2} className={styles.navItem}>How It Works</NavItem> 
       </LinkContainer> 
      </Nav> 
      </Navbar.Collapse> 
     </Navbar> 

Answer 1

簡単な解決策は、このように、ラッパー要素にナビゲーションバーを入れている：

<div className={styles.navbar}> 
<Navbar fixedTop fluid> 
      <Navbar.Header> 
      ... 
      </Navbar.Header> 

      <Navbar.Collapse eventKey={0}> 
      <Nav navbar className="navbar-right"> 
       <LinkContainer to="/how-it-works"> 
       <NavItem eventKey={2} className={styles.navItem}>How It Works</NavItem> 
       </LinkContainer> 
      </Nav> 
      </Navbar.Collapse> 
    </Navbar> 
</div>