如何通过JavaScript/TypeScript获取Radix UI Colors的CSS变量值？

问题核心 #

你遇到的空字符串问题，本质是执行getComputedStyle时，Radix Colors还没完成动态CSS变量的注入，或者当前组件所在DOM分支没继承到变量。以下是针对性解决方案：

1. 监听CSS变量的动态变化 #

Radix Colors是用户选择颜色后才生成变量，只在组件挂载时获取一次肯定会错过时机。用MutationObserver监听根元素的样式变化，确保变量更新时同步捕获：

const [accent7Color, setAccent7Color] = useState('');
const [accent8Color, setAccent8Color] = useState('');

useEffect(() => {
  const root = document.documentElement;
  
  // 统一的颜色更新逻辑
  const updateColors = () => {
    const rootStyles = getComputedStyle(root);
    setAccent7Color(rootStyles.getPropertyValue('--accent-7').trim());
    setAccent8Color(rootStyles.getPropertyValue('--accent-8').trim());
  };

  // 初始化获取一次
  updateColors();

  // 监听根元素的style属性变化
  const observer = new MutationObserver(updateColors);
  observer.observe(root, {
    attributes: true,
    attributeFilter: ['style']
  });

  // 组件卸载时清理监听
  return () => observer.disconnect();
}, []);

2. 确认变量的作用域与获取对象 #

Radix Colors默认把变量注入到:root（即document.documentElement）而非body，优先用根元素获取计算样式。如果组件在Shadow DOM或iframe中，需要切换到对应的宿主元素获取样式，不要直接用全局的document.documentElement。

3. 循环检测直到变量加载完成 #

如果Radix Colors的变量生成是异步逻辑，用requestAnimationFrame循环检测，直到获取到非空值：

const [accent7Color, setAccent7Color] = useState('');
const [accent8Color, setAccent8Color] = useState('');

useEffect(() => {
  const root = document.documentElement;
  let rafId;

  const checkAndUpdate = () => {
    const rootStyles = getComputedStyle(root);
    const accent7 = rootStyles.getPropertyValue('--accent-7').trim();
    const accent8 = rootStyles.getPropertyValue('--accent-8').trim();
    
    if (accent7 && accent8) {
      setAccent7Color(accent7);
      setAccent8Color(accent8);
      cancelAnimationFrame(rafId);
    } else {
      rafId = requestAnimationFrame(checkAndUpdate);
    }
  };

  rafId = requestAnimationFrame(checkAndUpdate);

  return () => cancelAnimationFrame(rafId);
}, []);

4. 排查组件的样式继承问题 #

检查深层嵌套组件的DOM节点是否被设置了all: unset或类似重置规则，导致无法继承:root的CSS变量。可以在浏览器开发者工具的Elements > Computed面板中，查看该元素的--accent-7变量是否存在，确认继承链路是否正常。

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