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

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

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

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

从我的研究中，我在github页面上看到了一些对话，人们在其中寻求一种实现此目标的方法，但是我在任何地方都找不到真正的干净解决方案。我将需要大量编写这样的代码。是否可以？

最佳答案

您可以将数字作为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;
`;

关于javascript - 将值与样式化组件中的单位相乘，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50881577/