在Styled Component中将值与单位相乘

Question

我有一个像这样的样式组件：

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

很遗憾，这不起作用，因为在我的情况下，props.theme.padding是2rem（字符串），因此无法与数字相乘。

从我的研究中，我看到了一些关于github页面的对话，人们要求找到一种方法来解决此问题，但我无法找到任何实际的干净解决方案。我将需要经常编写此类代码。有可能吗？

- CaribouCode

Answer 1

我通过使用calc()来避免这个问题。

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

- barro32

---

这是一个有效的方法，但从根本上讲，这将计算从JavaScript转移到CSS中，这并不总是理想的。 - CaribouCode

Answer 2

你可以将数字作为属性传递，并在样式组件中添加单位。

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;
`;

- johnny peter

---

问题在于该值具有主题化的特性，因此可以是 rem/px/em。因此，在每个用法中硬编码单位不利于DRY或安全。我来自 SCSS，这样的乘法运算是基本必需品。我非常惊讶 styled-components 或 polished 没有内置处理这种情况的功能。 - CaribouCode

Answer 3

我使用了一个相当简单的实用函数来完成这个任务：

// utils.js
export const unitMultiplier = (value) => (quotient) => {
  const num = parseFloat(value);
  const unit = value.replace(num.toString(), "");

  return num * quotient + unit;
};

你可以像这样将它包含在你的项目中：

import { unitMultiplier } from "~/utils";

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

更新： 我发现有一个库非常擅长这种事情：https://polished.js.org/docs/#math

- ShaneSauce