title: applying css using class name or ID attribute of html element in reactjs component
body: <p>Hi I am using UI component made of bootstrap which uses class name on the html element to define its look and feel. I have written html inside component class Home.js as follows :</p>
  
  <pre><code>import React, { Component } from 'react';
  import style from './css/main.css';
  
  export default class Home extends Component{
  
    render(){
      return(
        &lt;div class="wrapper" &gt;
  
          &lt;nav id="sidebar" &gt;
              &lt;div class="sidebar-header"&gt;
                &lt;h3&gt;Collapsible Sidebar&lt;/h3&gt;
              &lt;/div&gt;
  
              &lt;ul class="list-unstyled components" &gt;
                &lt;li class="active" &gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  
                &lt;li&gt;
                  &lt;a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false"&gt;Pages&lt;/a&gt;
                  &lt;ul class="collapse list-unstyled" id="homeSubmenu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;
            &lt;div id="content"&gt;
                &lt;button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn"&gt;
                  &lt;i class="glyphicon glyphicon-align-left"&gt;&lt;/i&gt;
                  Toggle Sidebar
                &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I have defined all css styling in main.css and it is been imported in home.js as can be seen in the source code above. My main.css if as following:</p>
  
  <pre><code>.header{
    background: #F8F8F8;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
  }
  
  .wrapper {
      display: flex;
      align-items: stretch;
  }
  
  #sidebar {
      min-width: 250px;
      max-width: 250px;
      min-height: 100vh;
  }
  
  #sidebar.active {
      margin-left: -250px;
  }
  </code></pre>
  
  <p>But I see, styles are not been applied as expected using class name or ID. Is there anyway where I can use existing UI component in reactjs without much change As I want to achieve in the above example. </p>