Question

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

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

不幸的是，这不起作用，因为在我的情况下props.theme.padding是2rem（一个字符串），因此无法乘以数字。

根据我的研究，我在github页面上看到了几个人们已经要求这样做的对话，但我无法在任何地方找到真正的清洁解决方案。我需要编写这样的代码。有可能吗？

Answer 1

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

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

Answer 2

我通过使用calc()

解决了这个问题

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

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

在样式化组件中将单位与单位相乘

3 个答案: