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

Question

我正在尝试根据其中的项目数来定位 div。我可以使用道具传递数字，但模板文字将其作为字符串插入。有没有办法让它转换成一个数字，以便能够正确地进行计算？

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

编辑：我刚刚注意到似乎没有任何东西从 prop 传递过来......在检查元素时，规则简单地显示为 bottom: calc(290 * )。 px有没有都是一样的

Answer 1

假设 contents prop 是一个数字，你可以这样做。

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

然后像这样使用它：

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

How to pass a number as a prop to a styled component?