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

Question

我想将react-bootstrap icon-bar组件的Navbar设置为background-color: white;。但是，我的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>