如何在 react-bootstrap 中编辑样式？

Question

我正在使用this boilerplate 创建一个基于反应的应用程序。我有这个基本代码：

App.js：

 render() {
    const styles = require('./App.scss');
    return (
      <div className="styles.app">
        <Helmet {...config.app.head}/>
        <Navbar fixedTop className={styles.navbar}>
          <Navbar.Header>
            <Navbar.Brand>
              <IndexLink to="/" activeStyle={{color: '#33e0ff'}}>
                <div className={styles.brand}/>
              </IndexLink>
            </Navbar.Brand>
            <Navbar.Toggle/>
          </Navbar.Header>
        </Navbar>
      </div>
    );
  }

App.scss：

.app {
  .navbar{
    background: #1b6d85;
  }
  .brand {
    position: absolute;
    $size: 40px;
    top: 5px;
    left: 5px;
    display: inline-block;
    background: #2d2d2d;
    width: $size;
    height: $size;
    background-size: 80%;
    margin: 0 10px 0 0;
    border-radius: $size / 2;
  }
  nav :global(.fa) {
    font-size: 2em;
    line-height: 20px;
  }
}
.appContent {
  margin: 50px 0; // for fixed navbar
}

对于Navbar 标签，我尝试使用模板中的className 和我在网上一些问题中看到的bsStyle。我无法成功编辑 react-bootstrap 的任何组件。 如果我错过了 react-bootstrap 网站上的文档，也请指点我。谢谢。

Answer 1

React-bootstrap 需要 bootstrap.css 作为文件中的依赖项。将它添加到您的 index.html 中，它应该适合您。

请参阅此文档：

React-bootstrap guide