title: React css modules override child styles
body: <p>I have a card component that accepts external class and its styles come from card.module.scss</p>
  <pre><code>export const Card = ({children, className}: any) =&gt; {
      return (
          &lt;div className={classNames(styles.container, className)}&gt;
              {children}
          &lt;/div&gt;
      )
  }
   //card.module.scss
  .container {
      padding: var(--spacer-s);
      background-color: var(--color-primary);
      border-radius: var(--radi-m);
      display: flex;
      height: 150px;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
  }
  </code></pre>
  <p>I want to override height property in another component like this.</p>
  <pre><code>//home.tsx
  &lt;Card className={styles.card}&gt;
    &lt;CardSecondaryText&gt;example&lt;/CardSecondaryText&gt;
  &lt;/Card&gt;
  
  //home.module.scss
  .card {
      height: 214px;
  }
  </code></pre>
  <p>But it didn't work. I don't want to use !important word. Any solution for this example will be great. Thanks.</p>