title: CSS not being applied to component in React
body: <p>I have a CSS file which I have imported in the <code>index.js</code> file and the <code>App.js</code> as well, but still the CSS is not being applied to to the component</p>
  <p>App.js:</p>
  <pre><code>import &quot;./App.css&quot;;
  function App() {
    return (
      &lt;div classname=&quot;wrapper&quot;&gt;
        &lt;h1&gt;BookList App&lt;/h1&gt;
        &lt;p&gt;Add or remove books&lt;/p&gt;
        &lt;div classname=&quot;main&quot;&gt;
          &lt;div classname=&quot;form-container&quot;&gt;&lt;/div&gt;
          &lt;div classname=&quot;view-container&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>index.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import &quot;./App.css&quot;;
  import App from &quot;./App&quot;;
  import reportWebVitals from &quot;./reportWebVitals&quot;;
  import &quot;bootstrap/dist/css/bootstrap.css&quot;;
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById(&quot;root&quot;)
  );
  
  /
  reportWebVitals();
  </code></pre>
  <p>File structure:</p>
  <pre><code>src:
  |App.css
  |App.js
  |index.js
  </code></pre>
  <p>I am not able to understand why the CSS is not being applied even though I have imported it</p>