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

Question

我想将react-bootstrap的Navbar组件的icon-bar为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>