title: Error: Uncaught [Error: Passed an incorrect argument to a color function, please pass a string representation of a color
body: <p>I'm having an issue with a button react component using <code>opacify</code> function from <a href="https://polished.js.org/docs/" rel="nofollow noreferrer">Polished Library</a></p>
  
  <p>I'm using styled-components for styling and a theme using <code>ThemeProvider</code> to pass the theme to be used. When I test the code it's returning this error, I'm using also storybook, any help is appreciated :)</p>
  
  <pre><code>export const Button: React.FC&lt;ButtonProps&gt;  = styled(ButtonUI)` 
  &amp;.ui.button{
  
   &amp;.inverted {
    background: ${props =&gt; opacify(-0.20, props.theme.greySteel)}!important;
   }
  }
  </code></pre>
  
  <p>the error in my yarn test:     </p>
  
  <pre><code>Passed an incorrect argument to a color function, please pass a string representation of a color.
  
  &amp;.inverted {
      &gt; 52 |        background: ${props =&gt; opacify(-0.20, props.theme.greySteel)}!important;
           |                               ^
  </code></pre>
  
  <p>Props are being passed like:</p>
  
  <pre><code>&lt;ThemeProvider theme={dark}&gt;
  </code></pre>
  
  <p>In storyboard:</p>
  
  <pre><code>const withGlobalStyles = (storyFn : any) =&gt; {
    return (
      &lt;React.Fragment&gt;
        &lt;ThemeProvider theme={dark}&gt;
        &lt;GlobalStyle /&gt;
        {storyFn()}
        &lt;/ThemeProvider&gt;
      &lt;/React.Fragment&gt;
    );
  }
  </code></pre>
  
  <p>My theme object looks like this:</p>
  
  <pre><code> export const dark: Palette = {
      greySteel: '#2E313F',
  
      }
  </code></pre>
  
  <p>My App.js</p>
  
  <pre><code>&lt;ThemeProvider theme={dark}&gt;
  
  &lt;/ThemeProvider&gt;
  </code></pre>
  
  <p>My stories.tsx file</p>
  
  <pre><code>export const storyBuilder = (
        scenarios: Scenarios,
        storyPath: string,
        pageTemplate?: React.FC&lt;any&gt;,
      ) =&gt; {
        const Template: React.FC = pageTemplate || noTemplate;
        const stories = storiesOf(storyPath, module);
        stories.addDecorator(withKnobs as any);
        stories.addDecorator(withGlobalStyles as any)
  
        Object.keys(scenarios).forEach(key =&gt; {
          stories.add(key, () =&gt; (
            &lt;ThemeProvider theme={dark}&gt;
              &lt;Provider store={store}&gt;
                &lt;Router&gt;
                  &lt;Template&gt;
                    &lt;div&gt;
                      {scenarios[key](knobs)}
                    &lt;/div&gt;
                  &lt;/Template&gt;
                &lt;/Router&gt;
              &lt;/Provider&gt;
            &lt;/ThemeProvider&gt;
          ))
        })
      };
  </code></pre>
  
  <p>I found answers over the internet but none of them has helped me, thanks in advance </p>