title: Second class of multiple classes can't override style
body: <p>button.module.css</p>
  <pre><code>.general_button {
      width: 100%; 
  }
  </code></pre>
  <p>button.js</p>
  <pre><code>import React from 'react';
  import styles from './button.module.css';
  
  const GeneralButton = ({ text, className}) =&gt; {
      return (
          &lt;button className={`${styles.general_button} ${className}`}&gt;
              &lt;p className={styles.text}&gt;{text}&lt;/p&gt;
          &lt;/button&gt;
      );
  };
  
  export { GeneralButton };
  </code></pre>
  <p>app.module.css</p>
  <pre><code>.next_btn {
      width: 35%;
  }
  </code></pre>
  <p>app.js</p>
  <pre><code>import React from 'react';
  import classes from './app.module.css';
  import { GeneralButton } from './components/Buttons';
  
  const App = () =&gt; {
      return (
          &lt;div&gt;
              &lt;GeneralButton className={classes.next_btn} text='next' /&gt;
          &lt;/div&gt;
      )
  }
  
  export default App;
  </code></pre>
  <p>When I used button component from app, button component is working with 'width:100%'. I would like to be button component is with 'width: 35%'.</p>
  <p><a href="https://i.stack.imgur.com/hsMWB.png" rel="nofollow noreferrer">This is when I inspect browser.</a></p>
  <p><a href="https://i.stack.imgur.com/EIGcq.png" rel="nofollow noreferrer">This is when I inspect browser.</a></p>