title: React component theme using sass variables depending on React prop value
body: <p>I cannot find better solution for theming. I have a sass-file with variables:</p>
  
  <p><em>vars.scss:</em></p>
  
  <pre><code>$colors: (
      dark: (
          theme1: #0096dc,
          theme2: #eb8200,
          …
      ),
      …
  );
  </code></pre>
  
  <p>For now I pass <code>theme</code> prop to all components which should have some styling depending on which page user is viewing. In React I build classname like this:</p>
  
  <pre><code>&lt;div className={styles[`button${theme ? `-${theme}` : ``}`]}&gt;{children}&lt;/div&gt;
  </code></pre>
  
  <p>and in sass I do:</p>
  
  <pre><code>@import 'vars';
  
  .button{
      /* basic styles */
      font-size: 14px;
      border: 1px solid;
  
      @each $theme, $color in map-get($colors, dark) {
          &amp;-#{$theme} {
              @extend .button;
              border-color: $color;
              color: $color;
          }
      }
  }
  </code></pre>
  
  <p>But this is absolutely inconvenient, because I need to place such code every time I need to style element depending on theme.</p>
  
  <p>There are solutions how to load different files with variables for theming in webpack, but I receive <code>theme</code> prop from redux, so webpack doesn't have access to that prop.</p>
  
  <p>As well as, I cannot find solution to pass property from react component to sass. Only opposite.</p>
  
  <p>No way to use variables in imports in sass. Still not implemented.</p>
  
  <p>Unfortunately, Cannot use CSS-in-JS approach in current project.</p>
  
  <p>Please help to find better approach.</p>