title: How to edit style in react-bootstrap?
body: <p>I am using <a href="https://github.com/erikras/react-redux-universal-hot-example" rel="nofollow noreferrer">this boilerplate</a> to create a react based application. I have this basic code:</p>
  
  <p>App.js:</p>
  
  <pre><code> render() {
      const styles = require('./App.scss');
      return (
        &lt;div className="styles.app"&gt;
          &lt;Helmet {...config.app.head}/&gt;
          &lt;Navbar fixedTop className={styles.navbar}&gt;
            &lt;Navbar.Header&gt;
              &lt;Navbar.Brand&gt;
                &lt;IndexLink to="/" activeStyle={{color: '#33e0ff'}}&gt;
                  &lt;div className={styles.brand}/&gt;
                &lt;/IndexLink&gt;
              &lt;/Navbar.Brand&gt;
              &lt;Navbar.Toggle/&gt;
            &lt;/Navbar.Header&gt;
          &lt;/Navbar&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>App.scss: </p>
  
  <pre><code>.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
  }
  </code></pre>
  
  <p>For the <code>Navbar</code> tag, I tried using both <code>className</code> as was done in the template and <code>bsStyle</code> as I saw in some questions online. I havent been able to successfully edit any component of react-bootstrap. 
  If I have missed the documentation of this in react-bootstrap website, please point me to it too. Thanks.</p>