css - 如何在 Emotion 中将十六进制颜色转换为 rgba

Question

我正在将我的应用程序的样式从 Less 转换为Emotion

在 Less 中，我的样式如下：

@blue: #476882;
background: rgba(red(@blue), green(@blue), blue(@blue), 0.5);

在转换为 Emotion 时，我正在这样做：

export const BLUE = '#476882'
background: rgba(red(${BLUE}), green(${BLUE}), blue(${BLUE}), 0.5);

但是它不起作用。

有什么建议可以完成这项工作吗？

Answer 1

我在情绪中找不到任何方法，但我个人用一个使用hex-rgb包的实用函数解决了它：

import hexRgb from 'hex-rgb';

export const rgba = (hex, alpha) => {
  const rgb = hexRgb(hex, { format: 'array' })
    .slice(0, -1)
    .join(',');
  return `${rgb},${alpha}`;
};

然后像这样使用它：rgba(${rgba('#000', 0.15)})