Styled Components 是用 JavaScript 创建带样式的 React 组件，样式作用域天然隔离、支持 props 动态计算、可复用 JS 工具链且 SSR 友好；它不是“用 JS 写 CSS”，而是将样式封装进组件内部，每个样式块对应一个真实 React 组件。
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，它会注入标签，且只挂载一次
import { createGlobalStyle, ThemeProvider } from 'styled-components';
<p>const GlobalStyle = createGlobalStyle`</p>
- { margin: 0; padding: 0; } body { font-family: -apple-system, sans-serif; } `;
const theme = { colors: { primary: '#007bff', danger: '#dc3545' }, spacing: { sm: '4px', md: '8px', lg: '16px' } };
// 在 App 外层使用
服务端渲染和 SSR 时 className 不一致？关键在 hydrate 流程
Next.js 或自建 SSR 项目中，如果客户端样式闪烁或 className 错乱，大概率是服务端生成的 class 名和客户端不匹配。这通常是因为 ServerStyleSheet 没正确收集、或 hydrate 阶段没传入服务端生成的 CSS 字符串。
- 服务端必须用
ServerStyleSheet包裹组件渲染，并调用.getStyleTags() - 客户端首次渲染前，要调用
StyleSheet.rehydrate()，传入服务端发来的 CSS 字符串 - 确保前后端使用的 styled-components 版本完全一致（
^5.3.0和^6.0.0不兼容）
这个环节出错不会报错，但会导致样式丢失或 FOUC（闪屏），调试时重点检查 HTML 中是否包含 。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
