React 的数据流是单向的，父组件通过 props 把状态和回调传给孩子，这是默认规则。但在一些真实场景里，子组件需要反过来影响父组件的样式，例如弹窗组件要锁定页面滚动、主题选择器要修改根节点背景色、或者某个局部组件要调整外层容器的尺寸。这些需求如果只靠 props 层层传递，代码会变得非常啰嗦。下面的内容会介绍几种行之有效的模式，并分析它们的适用边界。
这些方法的本质，是将样式变更请求从子组件向上传递，再由合适的执行者去修改对应的 DOM 或 React 状态。有的方案会触发父组件重新渲染，有的则直接操作 DOM 样式，选择时需要结合性能、代码可维护性和组件层级综合判断。
回调函数：最直接的状态提升
最简单的做法是让父组件把自己的状态更新函数包装成回调，通过 props 传递给子组件。子组件在合适的时机调用这个回调，父组件收到信号后更新 state，重新渲染后就呈现出新样式。这种模式实际上是把“样式决定权”保留在父组件中，子组件只负责发送请求。
下面是一个典型的例子：子组件通过按钮修改父容器的背景色。
function Parent() {
const [boxColor, setBoxColor] = React.useState('#ffffff');
const handleBoxColorChange = (newColor) => {
setBoxColor(newColor);
};
return (
<div style={{ backgroundColor: boxColor, padding: '32px' }}>
<Child onBoxColorChange={handleBoxColorChange} />
</div>
);
}
function Child({ onBoxColorChange }) {
return (
<button onClick={() => onBoxColorChange('#ffcc00')}>
将父容器改为黄色
</button>
);
}
这段代码的逻辑很清晰：Child 不直接操作任何 DOM，而是通过 onBoxColorChange 回调把新颜色告诉父组件。父组件调用 setBoxColor 触发自身重新渲染，最终 <div> 的 backgroundColor 被更新。
这种方式的优势是符合 React 的声明式理念，数据流依然可追踪。缺点是如果父组件与子组件之间隔着很多中间层，就需要逐层透传回调，中间层不得不转发 props，维护成本会明显上升。另外，每次样式变化都会导致父组件整棵子树重新渲染，如果父组件体积很大，可能带来性能问题。
Context：让深层子组件也能轻松修改父样式
当组件层级较深时，回调逐层传递会变得很痛苦。这时可以用 Context 把样式状态和更新函数放到一个共享对象中。任意层级的子组件都可以通过 useContext 取出更新函数，直接发出修改请求。
下面的示例演示了通过 Context 实现主题切换：父组件根据主题状态渲染不同背景色，孙组件可以直接修改这个主题。
const ThemeContext = React.createContext();
function Parent() {
const [theme, setTheme] = React.useState('light');
const themeStyles = {
light: { backgroundColor: '#ffffff', color: '#333333' },
dark: { backgroundColor: '#1e1e1e', color: '#f0f0f0' }
};
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<div style={themeStyles[theme]}>
<Child />
</div>
</ThemeContext.Provider>
);
}
function Child() {
const { setTheme } = React.useContext(ThemeContext);
return (
<button onClick={() => setTheme('dark')}>
切换为深色主题
</button>
);
}
与回调方案相比，Context 省去了中间层的 props 转发。中间层组件不需要感知主题相关的任何逻辑，只需要把 <Child /> 正常渲染即可。这在维护大型组件树时非常有用。
不过 Context 也存在副作用：所有消费同一个 Context 的组件，在 Provider value 变化时都会重新渲染。如果 Context 中保存的样式状态更新频繁，会造成不必要的渲染开销。实际项目中可以将“样式状态”和“样式的计算逻辑”拆分到多个 Context，或者配合 useMemo 来控制 Provider 的 value。
CSS 变量：避免重新渲染的轻量方案
如果目标只是修改父组件的某个样式属性，并且不希望触发 React 重新渲染，可以考虑使用 CSS 自定义属性（CSS Variables）。子组件通过 ref 拿到父元素 DOM 节点，直接调用 style.setProperty 设置一个 CSS 变量，父组件的样式表只要引用了这个变量，视觉效果就会立刻更新。
下面是一个典型实现：父组件定义 --accent-color 和 --font-size，子组件通过按钮修改这两个变量。
import React from 'react';
function Parent() {
const parentRef = React.useRef(null);
return (
<div className="variable-box" ref={parentRef}>
<Child parentRef={parentRef} />
</div>
);
}
function Child({ parentRef }) {
const changeParentStyle = () => {
if (parentRef.current) {
parentRef.current.style.setProperty('--accent-color', '#ff6600');
parentRef.current.style.setProperty('--font-size', '24px');
}
};
return (
<button onClick={changeParentStyle}>
调大父级字号并改变强调色
</button>
);
}
父组件对应的 CSS 文件或 <style> 标签中需要这样定义变量：
.variable-box {
--accent-color: #007acc;
--font-size: 16px;
color: var(--accent-color);
font-size: var(--font-size);
padding: 24px;
border: 2px dashed var(--accent-color);
}
点击按钮后，父元素的 --font-size 和 --accent-color 会发生变化，页面上会立刻看到字体增大、边框和文字颜色改变。由于这个过程不经过 React 的状态更新机制，父组件不会重新渲染，性能表现很好。
这种方案非常适合高频样式操作，比如拖拽调整宽度、实时切换强调色、动画帧更新等。不过要谨慎使用，因为它跳过了 React 的数据流，如果后续还要在其他地方读取这些样式，会导致状态来源不一致。建议只在“样式本身无需参与业务逻辑”的场景中使用。
其他方案与取舍
除了上面三种主流方案，React 生态中还有一些更另类的思路。比如使用 createPortal 将子组件渲染到父组件内部的某个容器中，让子组件在 DOM 结构上成为父容器的直接子元素，从而可以沿用 CSS 后代选择器来影响父容器的呈现。这种方法适合需要突破组件层级限制的弹层或悬浮层。
还有一种纯 CSS 的思路：如果父组件和子组件在同一个父容器内，可以借助 :has() 选择器让父级根据子级状态切换样式。例如 .parent:has(.child--active) 可以直接命中带有特定类名的子组件。这种方案完全不需要 React 代码参与，但浏览器兼容性需要提前确认，目前主流现代浏览器已经支持。
从维护角度看，推荐优先使用“回调函数”或“Context”这两种声明式方案，它们与 React 的状态管理自然融合，也方便单元测试。CSS 变量适合对性能敏感而状态逻辑又非常简单的场景。最后要特别提醒：如果子组件需要在父组件完成布局后立即修改样式，可以使用 useLayoutEffect 代替 useEffect，避免页面闪烁。对于全局样式的注入，useInsertionEffect 则更适合从子组件中动态插入 <style> 标签并同步修改父级外观。
在实际项目中，很少有一种方案能解决所有问题。建议先评估修改样式的频率、组件树的深度、以及是否需要持久化状态，再决定采用哪种模式。把以上方案组合使用，往往能写出更灵活且可维护的 React 组件。