title: How to style the same component in multiple ways using CSS Modules in React?
body: <p>I have just recently switched to using CSS Modules in my project and have come into a bit of an issue. </p>
  
  <p>In the simple code example below, I am creating an input component that I want to be able to reuse as a form field when creating forms. The issue comes in when I want to be able to style the input component differently in certain situations.</p>
  
  <pre><code>FormInput.js
  
  const FormInput = props =&gt; (
    &lt;FormControl&gt;
      &lt;InputLabel&gt;{props.label}&lt;/InputLabel&gt;
      &lt;Input /&gt;
    &lt;/FormControl&gt;
  );
  
  </code></pre>
  
  <pre><code>Form.js
  
  import React from 'react';
  import Button from '@material-ui/core/Button';
  import Input from './input';
  
  const Form = () =&gt; (
    &lt;form&gt;
      &lt;Input label="Name" /&gt;
      &lt;Button&gt; Submit &lt;/Button&gt;
    &lt;/form&gt;
  );
  
  </code></pre>
  
  <p>I know this can be done using styled-components, but I am really looking for a solution that uses CSS Modules. Any help would be appreciated</p>