StyledComponents：JS定义组件样式方法

Styled Components 是一种革命性的 React 样式方案，它并非简单地“用 JS 写 CSS”，而是将样式逻辑深度融入组件生命周期——每个 styled 组件都是一个真实、可复用、作用域隔离的 React 组件，天然支持 props 驱动的动态样式、TypeScript 类型安全、ES 模块优化与无缝 SSR；通过 ThemeProvider 统一管理主题、createGlobalStyle 注入全局重置，并借助 ServerStyleSheet 与 rehydrate 确保服务端渲染时样式零闪烁，真正实现了样式即组件、逻辑即样式的一体化开发体验。

Styled Components 是什么，它和普通 CSS 有什么根本区别

Styled Components 不是“用 JavaScript 写 CSS”，而是用 JavaScript 创建带样式的 React 组件。它把样式逻辑封装进组件内部，每个样式块对应一个真实的 React 组件（比如 const Button = styled.button），而不是生成全局类名或插入 style 标签。

这意味着：样式作用域天然隔离、支持 props 动态计算、可直接复用 JS 工具链（如 TypeScript 类型推导、ES 模块树摇）、服务端渲染时能正确提取 CSS 字符串。

如何定义基础样式组件并传入 props 控制外观

最常用的是 styled.xxx 工厂函数，返回一个 React 组件。样式字符串里可以写标准 CSS，但支持插值表达式——用 ${...} 插入 JS 值或函数。

• 插值函数接收组件的 props，返回 CSS 值（字符串或数字）
• 不能直接在插值里写 if 语句，要用三元或逻辑运算符
• 伪类、媒体查询、嵌套选择器都按 CSS 规则写，无需额外语法

import styled from 'styled-components';
<p>const Card = styled.div`
border: 1px solid #ccc;
padding: ${props => props.dense ? '8px' : '16px'};
background-color: ${props => props.theme === 'dark' ? '#333' : '#fff'};</p><p>&:hover {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}</p><p>@media (max-width: 768px) {
padding: 12px;
}
`;</p>

theme 和全局样式怎么配，为什么不能只靠 props 传颜色

频繁在每个组件里用 props.color 或 props.fontSize 会导致重复和耦合。Styled Components 提供 ThemeProvider 把主题对象注入 React 上下文，所有子组件通过 props.theme 访问。

• ThemeProvider 必须包裹在组件树顶层（如 App 外层）
• 主题对象可以是 plain object，也支持函数式 theme（返回新对象）
• 全局重置或基础样式用 createGlobalStyle，它会注入