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

Question

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

在 Less 中我有如下样式:

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

在转换为情感时，我正在这样做:

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

但是它不起作用。

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

Answer 1

我在 emotion 中找不到任何方法，但我个人用一个使用 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)})