title: React components styling methods
body: <p>I have this following component - </p>
  
  <pre><code>import React from 'react';
  import {Route, Link} from 'react-router-dom'
  import Error from './Error'
  
  class NavigationBar extends React.Component {
      render() {
          return (
              &lt;div className="nav"&gt;
                  &lt;nav className="navbar navbar-inverse bg-inverse"&gt;
                      &lt;ul className="nav navbar-nav"&gt;
                          &lt;li className="nav-item"&gt;
                              &lt;Link to={"/data"} className="nav-link"&gt; Data &lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="nav-item"&gt;
                              &lt;Link to={"/analysis"} className="nav-link"&gt; Analysis &lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="nav-item"&gt;
                              &lt;Link to={"/Monitor"} className="nav-link"&gt; Monitor &lt;/Link&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
                  &lt;Route path={"/webiks/:user"} component={Error}/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default NavigationBar;
  </code></pre>
  
  <p>In addition i added a nav.css file to  index.html in order to make some changes to the boostrap styling.</p>
  
  <p>The problem is that when entering the "webkis/:user" url the style only boostrap styling without the changes of the nav.css file.
  If one can explaing the reason , and also to mention some of the common methods
  for styling components (which is NOT an inline styling).</p>
  
  <p>Thanks.</p>