反応起動ストラップのスタイルを編集するには？

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：私は、この基本的なコード持っているテンプレートとbsStyleで行ったようNavbarタグの

.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 
} 

を、私は両方のclassNameを使用してみました私がオンラインでいくつかの質問で見たように。私は反応ブートストラップのコンポーネントを正常に編集することはできませんでした。 私が反応ブートストラップのウェブサイトでこの文書を見逃してしまった場合は、私もそれを指摘してください。ありがとう。

Answer 1

React-bootstrapは、ファイルに依存するとしてbootstrap.cssが必要です。 index.htmlに追加してください。正常に動作するはずです。

このドキュメントを参照してください：

React-bootstrap guide