title: ReactJS: Using rgba in box-shadow with styled-components props not working
body: <p>I'm building a <strong>ReactJS</strong> site and use <strong>styled-components</strong> with <code>ThemeProvider</code>. So my background-color or color css codes are like this <code>background-color: ${props =&gt; (props.theme.background)}</code>.
  Now I want to create a CSS pulse animation with box-shadow.</p>
  
  <pre><code>const pulse = keyframes
    to {
      box-shadow: 0 0 0 45px rgba(0,0,0,0);
    }
  
  
  // My component
  box-shadow: 0 0 0 0 rgba(0,0,0,0.7);
  animation: ${pulse} 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  </code></pre>
  
  <p>That's working! But I want to use the color from my ThemeProvider so I tried this: </p>
  
  <pre><code>// shadow from ThemeProvider = "rgba(0,0,0,0.7)";
  box-shadow: 0 0 0 0 ${props =&gt; (props.theme.shadow)};
  </code></pre>
  
  <p>And it's not working this way. I googled it but haven't found any solution for my problem. Can you help? How can I use props with rgba in box-shadow?</p>
  
  <p><strong>EDIT:</strong> It's working when I use a HEX Code!!! But not rgba and I need rgba!</p>