我是 React 和 React-Spring 的新手，正在练习如何使用它。
这里有React-Spring文档中的基本代码，我想使用 styled-components 转换它。
我将代码转换为 styled-components，但不知道如何在 styled-components 中更改...springs。
我能知道如何使用 * 样式化组件 * 来应用它吗？

文件编码：codesandbox

import '/index.css'
import { useSpring, animated } from '@react-spring/web'

export default function MyComponent() {
  const springs = useSpring({
    from: { x: 0 },
    to: { x: 100 },
  })

  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
        // don't know how to conver this part
        ...springs,
      }}
    />
  )
}

我的代码：codesandbox

import { useSpring, animated } from "@react-spring/web";
import styled from "styled-components";

export default function App() {
  const springs = useSpring({
    from: { x: 0 },
    to: { x: 100 }
  });

  return (
    <Spring>
      <animated.div className="box">hi</animated.div>
    </Spring>
  );
}

const Spring = styled.div`
  border: 3px solid black;

  .box {
    width: 80px;
    height: 80px;
    background: #ff6d6d;
    border-radius: 8px;
    //this part doesn't work
    ...springs;
  }
`;