如何在React组件中解构CSS变量值并提取RGB数值？

你的方案没办法直接实现，核心原因是CSS变量和JS变量属于两个不同的运行环境，React的JS代码不能直接读取和解构已定义的CSS变量值，得换思路处理。

为什么直接解构不可行 #

CSS变量是浏览器在渲染阶段解析的，React的JS代码在编译或初始运行时拿不到这些变量的具体值，没办法直接写出const complementaryColor1 = 77, 179, 229;这种提取了CSS变量值的代码。

可行的替代方案 #

方案一：JS作为颜色值的单一来源（推荐） #

把颜色数值先存在JS变量里，再同步给CSS变量，这样JS和CSS共享同一个值，不需要反向提取：

1. 在JS里定义颜色值：

   const complementaryColor1 = "77, 179, 229";
   

2. 在组件的样式中使用这个值生成两个CSS变量：

   .your-component {
     --complementary-contrast-alt-2: rgb(var(--color-values));
     --complementary-contrast-2-translucent: rgba(var(--color-values), 0.6);
   }
   

3. 在React组件中通过style属性把JS变量传递给CSS：

   <div className="your-component" style={{ "--color-values": complementaryColor1 }}>
     {/* 组件内容 */}
   </div>
   

方案二：通过DOM API读取CSS变量再处理 #

如果必须从已有的CSS变量中提取值，可以在组件挂载后用浏览器的DOM API获取，但存在异步问题：

import { useEffect, useState } from 'react';

function YourComponent() {
  const [colorValues, setColorValues] = useState('');

  useEffect(() => {
    // 获取根元素的计算样式
    const root = document.documentElement;
    const computedStyle = getComputedStyle(root);
    // 获取CSS变量的值
    const rgbStr = computedStyle.getPropertyValue('--complementary-contrast-alt-2').trim();
    // 提取rgb括号里的数值部分
    const extractedValues = rgbStr.replace(/rgb\(([^)]+)\)/, '$1');
    setColorValues(extractedValues);
  }, []);

  return (
    <div style={{ "--complementary-contrast-2-translucent": `rgba(${colorValues}, 0.6)` }}>
      {/* 组件内容 */}
    </div>
  );
}

注意：如果CSS变量的值动态变化，你还需要监听样式变化来更新colorValues，实现起来比较繁琐。

总结 #

最稳妥的方式是让JS作为颜色值的唯一来源，同步给CSS变量使用，避免从CSS反向提取值带来的异步和解析问题。

内容的提问来源于stack exchange，提问作者Siouxx