title: Convert React-Spring Example to Styled-Components
body: <p>Tried copying <a href="https://codesandbox.io/embed/j0y0vpz59" rel="nofollow noreferrer">this example</a>, but I'm using gatsby &amp; styled components; So I'm trying to convert the plain css file to styled-components. However, the cards aren't moving or reacting at all when I click or drag, did I do something horribly wrong?</p>
  
  <p>This file is pretty much just copy/paste:</p>
  
  <pre><code>import React, { useState } from "react";
  import { useSprings, animated, interpolate } from "react-spring";
  import { useGesture } from "react-use-gesture";
  
  const cards = [
    "https://upload.wikimedia.org/wikipedia/en/f/f5/RWS_Tarot_08_Strength.jpg",
    "https://upload.wikimedia.org/wikipedia/en/5/53/RWS_Tarot_16_Tower.jpg",
    "https://upload.wikimedia.org/wikipedia/en/9/9b/RWS_Tarot_07_Chariot.jpg",
    "https://upload.wikimedia.org/wikipedia/en/d/db/RWS_Tarot_06_Lovers.jpg",
    "https://upload.wikimedia.org/wikipedia/en/thumb/8/88/RWS_Tarot_02_High_Priestess.jpg/690px-RWS_Tarot_02_High_Priestess.jpg",
    "https://upload.wikimedia.org/wikipedia/en/d/de/RWS_Tarot_01_Magician.jpg"
  ];
  
  // These two are just helpers, they curate spring data, values that are later being interpolated into css
  const to = i =&gt; ({
    x: 0,
    y: i * -4,
    scale: 1,
    rot: -10 + Math.random() * 20,
    delay: i * 100
  });
  const from = i =&gt; ({ x: 0, rot: 0, scale: 1.5, y: -1000 });
  // This is being used down there in the view, it interpolates rotation and scale into a css transform
  const trans = (r, s) =&gt;
    `perspective(1500px) rotateX(30deg) rotateY(${r /
      10}deg) rotateZ(${r}deg) scale(${s})`;
  
  function Deck() {
    const [gone] = useState(() =&gt; new Set()); // The set flags all the cards that are flicked out
    const [props, set] = useSprings(cards.length, i =&gt; ({
      ...to(i),
      from: from(i)
    })); // Create a bunch of springs using the helpers above
    // Create a gesture, we're interested in down-state, delta (current-pos - click-pos), direction and velocity
    const bind = useGesture(
      ({
        args: [index],
        down,
        delta: [xDelta],
        distance,
        direction: [xDir],
        velocity
      }) =&gt; {
        const trigger = velocity &gt; 0.2; // If you flick hard enough it should trigger the card to fly out
        const dir = xDir &lt; 0 ? -1 : 1; // Direction should either point left or right
        if (!down &amp;&amp; trigger) gone.add(index); // If button/finger's up and trigger velocity is reached, we flag the card ready to fly out
        set(i =&gt; {
          if (index !== i) return; // We're only interested in changing spring-data for the current spring
          const isGone = gone.has(index);
          const x = isGone ? (200 + window.innerWidth) * dir : down ? xDelta : 0; // When a card is gone it flys out left or right, otherwise goes back to zero
          const rot = xDelta / 100 + (isGone ? dir * 10 * velocity : 0); // How much the card tilts, flicking it harder makes it rotate faster
          const scale = down ? 1.1 : 1; // Active cards lift up a bit
          return {
            x,
            rot,
            scale,
            delay: undefined,
            config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 }
          };
        });
        if (!down &amp;&amp; gone.size === cards.length)
          setTimeout(() =&gt; gone.clear() || set(i =&gt; to(i)), 600);
      }
    );
    // Now we're just mapping the animated values to our view, that's it. Btw, this component only renders once. :-)
    return props.map(({ x, y, rot, scale }, i) =&gt; (
      &lt;animated.div
        key={i}
        style={{
          transform: interpolate([x, y], (x, y) =&gt; `translate3d(${x}px,${y}px,0)`)
        }}
      &gt;
        {/* This is the card itself, we're binding our gesture to it (and inject its index so we know which is which) */}
        &lt;animated.div
          {...bind(i)}
          style={{
            transform: interpolate([rot, scale], trans),
            backgroundImage: `url(${cards[i]})`
          }}
        /&gt;
      &lt;/animated.div&gt;
    ));
  }
  
  export default Deck;
  </code></pre>
  
  <p>And here, I am trying to split the CSS file into (two) styled components:
  So it's basically more like a wrapper:</p>
  
  <pre><code>import React from "react";
  import Tarot from "@components/SpringTarot";
  
  import styled from "styled-components";
  
  const Outer = styled.div`
    * {
      box-sizing: border-box;
    }
  
    overscroll-behavior-y: contain;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
      helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
    position: fixed;
    overflow: hidden;
  `;
  
  const Wrapper = styled.div`
    background: lightblue;
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
    cursor: url("https://uploads.codesandbox.io/uploads/user/b3e56831-8b98-4fee-b941-0e27f39883ab/Ad1_-cursor.png")
        16 16,
      auto;
  
    &amp; &gt; div {
      position: absolute;
      width: 100vw;
      height: 100vh;
      will-change: transform;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    &amp; &gt; div &gt; div {
      background-color: white;
      background-size: auto 85%;
      background-repeat: no-repeat;
      background-position: center center;
      width: 45vh;
      max-width: 300px;
      height: 85vh;
      max-height: 570px;
      will-change: transform;
      border-radius: 10px;
      box-shadow: 0 12.5px 100px -10px rgba(50, 50, 73, 0.4),
        0 10px 10px -10px rgba(50, 50, 73, 0.3);
    }
  `;
  
  const SpringTarot = () =&gt; (
    &lt;Outer&gt;
      &lt;Wrapper&gt;
        &lt;Tarot /&gt;
      &lt;/Wrapper&gt;
    &lt;/Outer&gt;
  );
  
  export default SpringTarot;
  </code></pre>
  
  <p>I have tried putting what's right now in the outer wrapper into the styled-component global styles, but it makes no difference. </p>