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

Question

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

in 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)})