title: Merge classes in CSS modules using React, SASS and webpack
body: <p>I am trying to create a simple way to override CSS classes in React components that use CSS Modules.</p>
  
  <p>I can see the stringified names of the classes being imported from <code>styles</code> and being passed in via <code>theme</code>, but I can't seem to figure out how to see the actual CSS properties.</p>
  
  <p>Is there a way to get access to these and merge them into a new class which can then be applied via <code>className</code>?</p>
  
  <pre><code>// component1.scss
  .base {
    background-color: black; &lt;-- override this property
  }
  
  // component1.js
  import Component2 from './component2';
  import styles from './component1.scss';
  
  const theme = {
   base: styles.base
  };
  
  function Component1() {
   return &lt;Component2 theme={theme} /&gt;;
  }
  
  
  // component2.scss
  .base {
    background-color: yellow;
    text-align: center;
  
    ul {
      margin: 10px;
    }
  }
  
  // component2.js
  import Component2 from './component2';
  import styles from './component2.scss';
  
  
  function Component2({ theme }) {
   return (
      &lt;div className={() =&gt; someFunctionThatMergesCss(styles, theme)}&gt;
        &lt;ul&gt;
        ...
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
  
  
  
  
  </code></pre>