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