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

Question

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

应用程序.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>
    );
  }

应用.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