如何在PandaCSS中覆盖组件间共享的CSS变量？

问题本质 #

你直接修改导出的cssObj对象属性，只是改变了JS对象的内存值，但这个对象并没有和DOM元素的CSS变量建立绑定关系，所以DOM上的CSS变量不会自动同步更新，样式自然没变化。另外你的代码里cssObj的定义逻辑有误：--color是CSS变量名，你应该存储的是变量的值，而不是变量名本身。

解决方案 #

1. 先正确关联JS变量与DOM CSS变量

在使用CSS变量的Component1中，需要把JS变量的值绑定到DOM元素的style属性上：

// Recipe1.js
export const cssObj = { colorValue: '#666' }; // 存储CSS变量--color的初始值

// Component1.js
import { cssObj } from './Recipe1';
function Component1() {
  // 将cssObj的colorValue赋值给DOM的--color变量
  return <div style={{ '--color': cssObj.colorValue }} className="component1">...</div>;
}

2. 跨组件修改时用状态同步更新

如果是React/Vue这类组件框架，必须通过状态管理让Component1感知到值的变化：
以React为例，用Context实现全局状态同步：

// CSSVarContext.js
import { createContext, useContext, useState } from 'react';

const CSSVarContext = createContext();

export function CSSVarProvider({ children }) {
  const [colorVal, setColorVal] = useState('#666'); // 初始颜色值
  return (
    <CSSVarContext.Provider value={{ colorVal, setColorVal }}>
      {children}
    </CSSVarContext.Provider>
  );
}

export function useCSSVar() {
  return useContext(CSSVarContext);
}

在Component1中使用Context的值：

// Component1.js
import { useCSSVar } from './CSSVarContext';

function Component1() {
  const { colorVal } = useCSSVar();
  return <div style={{ '--color': colorVal }}>内容</div>;
}

在Component2中触发修改：

// Component2.js
import { useCSSVar } from './CSSVarContext';

function Component2() {
  const { setColorVal } = useCSSVar();
  return <button onClick={() => setColorVal('red')}>切换为红色</button>;
}

3. 无框架场景直接操作DOM（不推荐）

如果是纯JS项目，可以直接获取Component1的DOM元素，调用setProperty修改CSS变量：

// Component2.js
const component1El = document.querySelector('.component1');
component1El.style.setProperty('--color', 'red');

这种方式耦合性高，不利于维护，仅适合简单场景。

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