React Components and overriding Twitter Bootstrap styles
<p>I am currently using reactjs and twitter bootstrap (for styles). I am also using the CSSModules library found <a href="https://github.com/gajus/react-css-modules" rel="nofollow">HERE</a> in order to allow for an external style sheet. I have been able to get none bootstrap components to style correctly, but I am struggling with overriding Twitter-bootstrap styles with my own custom CSS. More specifically, I am not able to override the navbar-inverse class with my own styles. My goal is to change the background color to white, and the link text color to black. the code below focuses on just changing the background color, but nothing happens with any variation I can think of. Has anyone figured out the correct way to override twitter bootstrap styles for react components? Your help would be greatly appreciated!</p>

<p>If you have any questions or concerns, please just let me know. </p>

<p>Here is the HTML</p>

<pre><code>  &lt;nav class="navbar navbar-inverse navbar-fixed-top" styleName="navbar-custom"&gt;
                &lt;div class="container-fluid"&gt;
                    &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                        &lt;ul class="nav navbar-nav"&gt;
                            &lt;li&gt;&lt;a href="#Home" activeClassName="active"&gt; Home&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#OurMission" activeClassName="active"&gt; Our Mission &lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#Projects" activeClassName="active"&gt;Projects &lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/nav&gt;
</code></pre>

<p>and there is the CSS from styles.css</p>

<pre><code>.navbar-custom{
   background-color: #ffffff!important;
}
</code></pre>