如何設置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>