title: Making customizable css properties with React and CSS Modules/PostCSS
body: <p>I'm trying to make a library of react components that's external to an application. This will be an npm module, loaded with Webpack. I'm styling the component using CSS Modules, and I'm trying to see how to make some of its properties customizable. For instace, background color.</p>
  
  <p>I would like to use css variables for this to have for instance this syntax in the css file:</p>
  
  <pre><code>.myClass {
      backgrond-color: var(--backgroundColor, red);
  }
  </code></pre>
  
  <p>Where <strong>--backgroundColor</strong> is a variable I can set, and <strong>red</strong> is the default. My question is, is there a way I can pass variables to the .css file when loading it from the .jsx file? So I could pass a variables object to the component, which then would influence how it loads it style? Could I use PostCSS for this?</p>
  
  <p>Thanks.</p>
  
  <p>PS: I know this could be solved by using inline JS styles, but I'm trying to give CSS a shot first.</p>