如何将数字作为道具传递给样式化组件？

Question

我正在尝试根据其中的项目数定位div。我可以用道具传递数字，但是模板文字会将其内插为字符串。有没有一种方法可以将其转换为数字以正确进行此计算？

const BoxTray = styled.div`
  position: fixed;
  bottom: calc(0 + (290px * ${props => props.contents}));
';

编辑：我刚刚注意到，道具似乎什么都没有传入……检查元素时，规则简单地显示为bottom: calc(290 * )。不论是否存在px，这都是相同的。

Answer 1

假设contents道具是一个数字，您可以这样做。

const BoxTray = styled.div`
  bottom: ${props => props.contents * 290}px;
  position: fixed;
`;

然后像这样使用它：

<BoxTray contents={2}>
  {/*  */}
  {/*  */}
</BoxTray>