如何在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