如何在 React 中解构 CSS 变量值

Question

是否可以在 React 组件中解构 css 变量的值？ 这是在 CSS 文件中定义的变量。

--complementary-contrast-alt-2: rgb(77, 179, 229);

想法是提取该变量的值，然后创建一个函数，该函数将仅使用数字的结果来转换一个新变量。结果是这样的：

const complementaryColor1 = 77, 179, 229;

这能实现吗？

转换后，它会被发送到组件 CSS，作为 prop 并用作值 + 不透明度，就像这样。

--complementary-contrast-2-translucent: rgba(var(complementaryColor1), 0.6);