用Props传递CSS变量是将主题作为数据实时注入组件根节点，通过对象结构化定义、组件内联style绑定、嵌套覆盖及顶层状态驱动实现主题切换。
用 Props 传递 CSS 变量，核心是把主题当作数据来传、来变、来用——不是写多套样式，而是让 --primary、--bg 这些变量随 Props 实时注入组件根节点，再由 CSS 原生消费。子组件不处理主题逻辑，只负责“接住变量、渲染样式”。
结构化定义主题 Props
别用零散字符串传颜色，统一用对象组织主题参数：
- 推荐格式：
{ primary: '#4a6fa5', background: '#f8f9fa', text: '#212529', radius: '6px' } - 父组件通过
<Card theme="{darkTheme}">透传，Vue 中用defineProps({ theme: Object })，React 中用 TypeScript 接口约束类型 - 主题常量建议集中管理，例如
themes/light.ts和themes/dark.ts分开导出，避免硬编码重复值
组件内联注入变量，不污染全局
不在 :root 设置，而是在组件最外层元素上用 style 动态绑定：
- 将主题对象转为 CSS 自定义属性映射：
{ '--primary': theme.primary, '--background': theme.background } - 在 JSX 或 Vue 模板中：<div :style="themeVars"> 或 <div style={themeVars}>
- 配合语义化 class 使用，如
class="card theme-dark"，兼顾降级与可读性 - scoped 样式或普通 CSS 中直接写：
color: var(--text); border-radius: var(--radius);
支持嵌套与局部覆盖
子组件也能接收 theme Prop，并优先使用传入值，未传则 fallback 到父级或默认主题：
立即学习“前端免费学习笔记（深入）”；
- 弹窗、侧边栏等独立区域可自定义主题，无需影响全局
- Vue 中可用
provide/inject提供默认主题，同时保留 props 接口供覆盖：theme?.primaryColor || injectedTheme.primaryColor - React 中可结合 Context + Props 回退，保持穿透能力又不失灵活性
顶层状态驱动，Props 只是通道
Props 是数据管道，不是源头。主题切换应由 App 或 Layout 层统一控制：
- 在顶层维护
currentTheme响应式变量（Vue 的 ref / React 的 useState） - 切换时只更新这一个状态，所有消费组件自动重渲染，CSS 变量实时生效
- 搭配 localStorage 持久化，刷新后仍保持用户选择的主题
