小编Leg*_*ith的帖子

我是用 Gatsby 和 React JS 构建网站的新手。

问题

我想transform使用.css 基于 css属性制作一个简单的动画react-spring。当我使用styled-components（使用theme.js文件）时，我希望动画根据断点做出响应。

问题是它react-spring不接受数组，而只接受字符串，例如“10px”。

? 响应式样式react-components

假设我有以下定义

const MyDiv = styled(animated.div)`
  height: 100px;
  ${width}
`;

并简单地调用元素

<MyDiv width={[50, 70]} />

因为我已经在我的文件中实现了断点theme.js，所以这很完美（使用来自styled-components 的ThemeProvider）。

const [showButton, setShowButton] = useState(false);
const clickState = useSpring({
  oi: showButton ? 0 : 1,
});
const divAnimation = {
  transform: clickState.oi.interpolate(oi => …