用props实现组件换肤本质是将主题配置作为可传递、可响应的数据，通过结构化props透传、内联css变量注入、嵌套局部覆盖及顶层状态管理，实现样式动态更新与隔离。
用 Props 实现组件换肤，本质是把主题配置当作数据来传递和响应——不是写多套 CSS，而是让样式变量随 Props 变化而实时更新。关键在于“变量可传、可变、可生效”，子组件不关心主题逻辑，只专注消费。
1. 主题定义为结构化 Props
避免零散字符串传值，统一用对象组织主题参数：
- 推荐格式：{ primary: '#4a6fa5', background: '#f8f9fa', text: '#212529', radius: '6px' }
- 父组件通过
themeProp 透传：<card theme="{darkTheme}"></card> - TypeScript 中可用接口约束类型，Vue 中可用
defineProps配合运行时校验
2. 子组件内联注入 CSS 变量
不在 :root 全局污染，而是在组件根元素上动态绑定 style：
- 用
style={{ '--primary': theme.primary, '--background': theme.background }}注入 - 配合 class 控制语义化状态（如
class="card theme-dark"），兼顾降级与可读性 - scoped 样式中直接使用
var(--primary)，无需重复写颜色值
3. 支持嵌套与局部覆盖
当子组件内部需要独立主题（如弹窗、侧边栏），可沿用相同模式：
- 子组件也接收
themeProp，优先使用传入值；未传则 fallback 到父级 theme - 用
style再次注入变量，实现局部样式隔离 - 避免依赖全局 class 切换，防止跨层级样式冲突
4. 配合状态管理统一控制
Props 是通道，不是源头。主题状态应由顶层管理：
- 在 App 或 Layout 层维护
currentTheme，通过 Props 向下穿透 - 切换主题时仅更新一个响应式变量，所有消费组件自动重渲染
- 搭配 localStorage 持久化，页面刷新后仍保持上次选择
