styled-components 样式组件
最后更新：2026-10-28
styled-components 样式组件
styled-components 是 CSS-in-JS 的代表：用模板字符串把 CSS 写进 JS，样式化组件自带唯一类名与作用域，可通过 props 做条件样式，主题经 ThemeProvider 注入。
| 分组 | 生态与进阶 |
|---|---|
| 类型 | 第三方库 |
| 引入版本 | v6 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
npm install styled-components
import styled, { ThemeProvider } from 'styled-components'
const Button = styled.button`
background: ${p => (p.$variant === 'danger' ? '#dc2626' : '#2563eb')};
color: #fff; border: none; border-radius: 6px;
`
// 使用：<Button $variant="danger">删除</Button>
// 主题：<ThemeProvider theme={{ fg: '#111' }}>…</ThemeProvider>
// 插值函数里用 props.theme 读取主题⚙️ 参数
| 样式标签模板 | styled.button`…` 中的 CSS 文本，可用 ${插值函数} 读取 props 或 theme 做条件样式。 |
|---|---|
| $variant 等临时 props | 以 $ 开头的 props 只参与样式逻辑、不会透传到 DOM，是 v6 的推荐写法。 |
| theme（ThemeProvider） | 通过 Context 下发的主题对象，所有样式化组件的插值函数里都能用 props.theme 读取。 |
返回值：无返回值，第三方库用法说明见示例。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
模拟演示：点击「切换主题」按钮，卡片背景、文字与边框颜色在浅色 / 深色主题间平滑过渡（0.3s CSS 过渡），按钮配色也随主题变化。体现 CSS-in-JS「主题对象驱动样式」的思想，真实 styled-components 中由 ThemeProvider 下发 theme。💡 要点
⚠️ 注意 运行时开销：每个样式化组件在客户端动态生成并注入样式，性能敏感的大列表场景建议改用 CSS Modules 或 Tailwind。
💡 提示 临时 props 用 $ 前缀（$variant），样式逻辑不会作为非标准属性透传到 DOM，避免 React 警告。
ℹ️ 说明 React 服务端组件（RSC）不能使用 styled-components，需把样式组件放进 'use client' 的客户端组件。
🏷️ 生态与进阶相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 和 Sass/Less 比有什么优势？
A 样式与组件同文件、支持 props 插值与主题注入、类名自动唯一不冲突。代价是运行时开销与 SSR 配置成本，按项目规模权衡。
Q 样式会互相覆盖吗？
A 不会冲突：每个样式化组件生成唯一类名。但渲染嵌套时 CSS 相同特异性的覆盖规则依然适用，注意书写顺序即可。
Q v5 升级到 v6 要注意什么？
A v6 移除了部分废弃 API、默认支持 $ 前缀临时 props、样式注入更快。升级前对照官方迁移指南逐项检查，多数项目改动很小。
