javascript - 将样式组件中的值与单位相乘

Question

我有一个这样的样式组件:

export const Text = styled.div`
   padding: ${props => props.theme.padding * 2};
`;

不幸的是，这不起作用，因为在我的场景中 props.theme.padding 是 2rem(一个字符串)，因此不能与数字相乘。

根据我的研究，我在 github 页面上看到了一些对话，人们在其中请求一种方法来执行此操作，但我无法在任何地方找到真正干净的解决方案。我需要经常编写这样的代码。可能吗？

Answer 1

您可以将数字作为 prop 传递并在样式组件中添加单位

export const Text = styled.div`
   padding: ${props => parseFloat(props.theme.padding) * 2}rem; // padding is a float here 
`;

或者你应该提取数字，由于性能影响我不太推荐

const valueFromUnit = x => parseFloat(x.match(/\d+/g));

export const Text = styled.div`
   padding: ${props => valueFromUnit(props.theme.padding) * 2}rem;
`;