如何设置react-bootstrap Navbar组件的图标栏样式？

Question

I want to style the icon-bar of a react-bootstrap's Navbar component to have a background-color: white; . However, my webpack scss loader does not allow me to style CSS classes with dashes, I can only use camel case. This is my webpack config:

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

I prefer not to change this config. Instead I would like to change my JSX so I can attach a custom class to the icon-bar element. How do I do this?

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

a simple solution is put the navbar in wrapper element, like this :

<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>