title: Enabling CSS modules in ReactJS by adding a .module to CSS file name
body: <p>I am new to ReactJS , I was reading about how to enable CSS modules and what i came to is:</p>
  
  <blockquote>
    <p>If you add .module it will add a base64 hash string to the name of classes used</p>
  </blockquote>
  
  <p>Actually i created a function-based component <code>Layout.js</code></p>
  
  <pre><code>import React from "react";
  import classes from "./Layout.module.css";
  
  const layout = props =&gt; &lt;div className={classes.bg}&gt;Here first div&lt;/div&gt;
  
  export default layout;
  
  </code></pre>
  
  <p>and css file as <code>Layout.module.css</code></p>
  
  <pre><code>.bg {
    display: inline;
    background-color: rgba(115, 251, 4, 0.685);
  }
  </code></pre>
  
  <p>When i inspected the <code>div</code> in browser:</p>
  
  <pre><code>&lt;div class="Layout_bg__1bzIA"&gt;Here first div&lt;/div&gt;
  </code></pre>
  
  <p>everything seems to work fine, But when i created another component <code>second.js</code> with a div in it and applied the same class</p>
  
  <pre><code>import React from "react";
  import classes from "../Layout/Layout.module.css";
  
  const second = props =&gt; &lt;div className={classes.bg}&gt;Here second div&lt;/div&gt;
  
  export default second;
  </code></pre>
  
  <p>And when i inspected the second div it looks like:</p>
  
  <pre><code>&lt;div class="Layout_bg__1bzIA"&gt;Here seond div&lt;/div&gt;
  </code></pre>
  
  <p>They both took the same hash value, So my question is it right what i quoted above</p>
  
  <blockquote>
    <p>.module enables CSS modules</p>
  </blockquote>
  
  <p>And if it is , Why it gives the same hash values to different elements in different components </p>