使用 CSS-in-JS 可实现组件级动态样式与主题切换，以 styled-components 为例，通过模板字符串和 props 动态设置样式，结合 ThemeProvider 统一管理主题，支持状态感知与运行时主题切换，提升封装性与可维护性。
使用 CSS-in-JS 可以将样式逻辑直接写在 JavaScript 中，实现组件级样式的动态控制和主题切换。它不仅提升了封装性，还让样式具备状态感知能力，便于响应用户交互或全局主题变化。
选择合适的 CSS-in-JS 库
常见的库如 styled-components、emotion 和 JSS 都支持动态样式和主题管理。以 styled-components 为例，它通过模板字符串定义样式，并能访问组件的 props 和上下文中的主题。
- 安装：npm install styled-components
- 它利用 React 的 Context API 自动传递主题数据
- 支持服务器端渲染和样式提取
基于 Props 动态调整样式
你可以根据组件的属性实时改变外观。比如一个按钮组件，在不同状态下显示不同颜色。
const Button = styled.button` background-color: ${props => props.primary ? '#007bff' : '#6c757d'}; color: white; border: none; padding: 10px 20px; border-radius: 4px; `; // 使用时这样，样式逻辑与组件行为紧密结合，无需额外类名管理。
立即学习“前端免费学习笔记（深入）”；
统一管理应用主题
通过 ThemeProvider 提供全局主题，所有子组件都能访问主题变量。
import { ThemeProvider } from 'styled-components'; const theme = { colors: { primary: '#007bff', secondary: '#6c757d' }, spacing: '16px' }; // 在根组件中包裹在任意 styled 组件中通过 props.theme 获取这些值，实现一致的视觉风格。
运行时切换主题
结合 React 的状态管理，可以实现用户点击切换亮色/暗色模式等功能。
- 定义多个主题对象（如 lightTheme、darkTheme）
- 用 useState 存储当前主题
- 通过按钮触发 setTheme 更换主题
由于 ThemeProvider 会重新渲染子树，所有依赖主题的组件将自动更新样式。
基本上就这些。CSS-in-JS 让样式不再是静态资源，而是可编程、可组合、可主题化的逻辑单元，特别适合构建高交互性和个性化体验的现代前端应用。
