Javascript 在React Spring+；样式化组件（插值）

我有一个油炸圈饼按钮。它是一个样式化的组件+react-spring的动画：

我用钩子初始化react spring，如下所示：

const [{ y }, set] = useSpring(() => ({
    y: 50,
    config: config.wobbly
  }));

然后在某个地方，有一个div，它设置并取消设置

y

值

  <div
        onMouseEnter={() => set({ y: -50, opacity: 1 })}
        onMouseLeave={() => set({ y: 50, opacity: 0 })}
      >

它不起作用。有什么想法吗

---

PS:

props.y

是否存在于样式化组件中，并且它似乎得到了一个动画对象，而不是一个值。所以我一定是做错了什么。我发现的所有在线教程都比较基础，不是关于使用react-spring+样式的组件插值的

我想你做不到这一点。即使不使用插值，useSpring返回值也不是样式。这似乎是一种风格，但并不完全如此。我很确定有一种方法可以很好地与风格化组件集成，-我相信我以前在项目中见过它。但我不记得在哪里。我就是在网上找不到任何东西。但是，是的，我在这里尝试的方式显然是不正确的：（祝你好运，我会回头看看。你有没有尝试用样式化组件中的

css

来包装它？我想没有-你的确切意思是什么？

  <div
        onMouseEnter={() => set({ y: -50, opacity: 1 })}
        onMouseLeave={() => set({ y: 50, opacity: 0 })}
      >

<Donut style={{ transform: y.interpolate(v => `translateY(${v}%`) }} />

<Donut y={y} />

${props => props.y.interpolate(v => `transform: translateY(${v}%`)};