title: Can you use a styled-component keyframe inline on a component?
body: <p>I'm attempting to create a twinkling star effect in my app. I have created an array and looped through it to get the number of &quot;star&quot; <code>div</code>s, and I used styled components to style the stars. I'm attempting to animate them each randomly, but in order to do that I have to randomize the properties in-line when the divs are being created while looping. Attempting to get random values in the styled-component gives the same value to each div. My code is currently as follows:</p>
  <pre><code>import React from 'react';
  import styled, { keyframes, css } from 'styled-components'
  import styles from './Stars.module.scss'
  
  const flicker = keyframes`
      0%,100% {
          opacity: 1;
      }
      50% {
          opacity: 0.2;
      }
  
  `
  const Star = styled.div`
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 2px;
      background: white;
  `
  const StarContainer = styled.div`
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
  `
  
  const vpHeight = window.innerHeight;
  const vpWidth = window.innerWidth;
  
  const starCount = () =&gt; {
      const count = []
      for(let i = 1; i &lt;= 300; i++){
          count.push(i)
      }
      return count
  }
  
  const Stars = () =&gt; {
      return (
          &lt;StarContainer id='star-container'&gt;
              {starCount().map((star, i) =&gt; (
                  &lt;Star style={{
                      animation: `${Math.floor(Math.random() * 8)}s ${flicker} infinite`,
                      top: `${Math.floor(Math.random()*vpHeight)}px`,
                      left: `${Math.floor(Math.random()*vpWidth)}px`
                  }} /&gt;
              ))}
          &lt;/StarContainer&gt;
      );
  }
  
  export default Stars;
  </code></pre>
  <p>However this gives the following error: <code>Error: It seems you are interpolating a keyframe declaration (gvlTRP) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\ helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css</code></p>
  <p>I'm not sure how to proceed. Is there a way to include the <code>styled-component</code> keyframe in the inline element styles?</p>