2016-11-14 125 views
1

我正在使用this boilerplate來創建一個基於反應的應用程序。我有這樣的基本代碼:如何在react-bootstrap中編輯樣式?

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網站上錯過了這個文檔,請將它指向我。謝謝。

+0

你有沒有在您的index.html添加bootstrap.min.css和bootstrap.min.js作爲依賴 –

+0

不,我沒有,如果有人需要知道將風格添加到react-bootstrap中。你能否提供一些參考? –

回答

1

React-bootstrap要求bootstrap.css作爲文件中的依賴項。將它添加到你的index.html,它應該適合你。

看到這個文檔:

React-bootstrap guide

+0

我在手機上,所以我很難寫出詳細的解釋。但在答案的鏈接應該可以幫助你 –

+0

我認爲你應該檢查我提到的樣板。它的工作原理有點不同,我認爲它已經配置了bootstrap。 –

+0

我從文檔中可以理解的是,它們使用的是本地樣式,因此您可以在下載文件後嘗試在您的文件中導入bootstrap.min.css。此外,爲了直接指定樣式,並且沒有明確提及它們,請在readme.md文件中提及所需的更改 –