用Props控制换肤的核心是将结构化主题对象（如{primary: '#4a6fa5', background: '#f8f9fa'}）通过Props透传，子组件用style动态注入CSS变量（如--primary），并结合class切换（如theme-dark）实现语义化与兼容性降级，顶层统一管理主题状态，子组件无感消费。
用 Props 控制换肤，核心是把主题色、字体、背景等样式变量从父组件传入子组件，再通过 CSS 变量（:root 或组件级 style）动态注入，配合 class 切换或内联样式生效。关键不在“写多少 CSS”，而在“让变量可传、可变、可响应”。
1. 定义主题数据结构，用 Props 透传
主题不应是零散字符串，而应是结构化对象，比如：
{
primary: '#4a6fa5',
background: '#f8f9fa',
text: '#212529',
border: '#dee2e6',
radius: '8px'
}
父组件通过 Props 将该对象传给需要换肤的组件（如 const { theme } = props 接收。确保 Props 类型清晰（可用 TypeScript 或 PropTypes 校验）。
2. 在组件中注入 CSS 变量
推荐在组件根元素上用 style 动态绑定 CSS 变量，避免污染全局 :root，也便于局部主题嵌套：
- 用
Object.entries(theme).map(...)转为{ '--primary': '#4a6fa5', ... }对象 - 将该对象传入
style属性：... - CSS 中直接使用：
color: var(--text); border-radius: var(--radius);
这样换肤时只需更新 Props，React 自动重渲染并刷新内联 style，变量实时生效。
3. 配合 class 切换增强语义与 fallback
纯 CSS 变量有兼容性考虑（IE 不支持），也难做复杂状态样式（如 button:hover 的颜色偏移）。建议：
- 用 class 标识主题（如
class="theme-dark"）控制基础色系和过渡效果 - CSS 变量负责“可配置项”，class 负责“行为与降级”
- 例如：
.theme-dark { --primary: #0d6efd; } .theme-dark button:hover { background: color-mix(in srgb, var(--primary), black 20%); }
Props 控制 class 名（className={`component ${theme.name}`}），实现 class + 变量双驱动。
4. 父组件统一管理主题，子组件无感消费
换肤逻辑应集中在顶层（如 ThemeProvider），子组件只做样式消费：
- 顶层用 Context 或状态（
const [theme, setTheme] = useState(lightTheme)）管理当前主题 - 所有子组件通过 Props 或 Context 接收
theme对象，不关心切换逻辑 - 按钮、输入框等通用组件直接用
var(--primary)，无需 if-else 判断深色/浅色
这样新增皮肤只需扩展主题对象、加一组 class 规则，组件本身几乎不用改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
