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

【问题标题】：How do I style the icon-bar of react-bootstrap's Navbar component?如何设置 react-bootstrap Navbar 组件的图标栏样式？
【发布时间】：2017-02-04 07:25:24
【问题描述】：

我想将 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 元素。我该怎么做？

首页.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>

【问题讨论】：

标签： css twitter-bootstrap reactjs react-jsx react-bootstrap

【解决方案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>

【讨论】：