title: How to change styles in useable component in ReactJS
body: <p>I have following code.</p>
  <p>This is my reusable components which name is &quot;Blocks&quot;</p>
  <pre><code>
      import React from &quot;react&quot;;
      import styles from &quot;./Blocks.module.scss&quot;;
      import cx from &quot;classnames&quot;;
      const Blocks = ({ newStyle }) =&gt; {
        return (
          &lt;div className={cx(styles.blocksBox, { newStyle })}&gt;
            &lt;div&gt;
              Some Text !!!
            &lt;/div&gt;
          &lt;/div&gt;
         );
       };
  
      export default Blocks;
  </code></pre>
  <p>And this is styles from my &quot;Blocks&quot; component</p>
  <pre><code>    .blocksBox {
        display: grid;
        grid-template-columns: 49% 50%;
        padding: 10px 30px;
        margin:20px;
        column-gap: 30px;
      }
   
  </code></pre>
  <p>Also I have another component which name is &quot;MainBox&quot;, and I want to use &quot;Blocks&quot; component in &quot;MainBox&quot; with different styles. Below you can seethe code and new styles.</p>
  <pre><code>    import React from &quot;react&quot;;
      import Blocks from &quot;../Blocks&quot;;
      import styles from &quot;./MainBox.module.scss&quot;;
      import cx from &quot;classnames&quot;;
      function MainBox() {
        return (
          &lt;div&gt;
            &lt;div&gt; Some Text in Main Box  &lt;/div&gt;
            &lt;Blocks newStyle={styles.someStyle} /&gt;
          &lt;/div&gt;
        );
      }
      export default MainBox;
  </code></pre>
  <pre><code>    .someStyle {
        font-size: 50px;
        color: red;
        margin:30px;
      }
  </code></pre>
  <p>But something was going wrong and new styles dose not applied, there is no any errors, I just write some wrong syntax, please help me resolve this problem</p>