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;
}
`;theme 和全局样式怎么配，为什么不能只靠 props 传颜色
频繁在每个组件里用 props.color 或 props.fontSize 会导致重复和耦合。Styled Components 提供 ThemeProvider 把主题对象注入 React 上下文，所有子组件通过 props.theme 访问。
立即学习“Java免费学习笔记（深入）”；
-
ThemeProvider必须包裹在组件树顶层（如App外层） - 主题对象可以是 plain object，也支持函数式 theme（返回新对象）
- 全局重置或基础样式用
createGlobalStyle，它会注入<style></style>标签，且只挂载一次
import { createGlobalStyle, ThemeProvider } from 'styled-components';
<p>const GlobalStyle = createGlobalStyle`</p><ul><li>{
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, sans-serif;
}
`;</li></ul><p>const theme = {
colors: { primary: '#007bff', danger: '#dc3545' },
spacing: { sm: '4px', md: '8px', lg: '16px' }
};</p><p>// 在 App 外层使用
<ThemeProvider theme={theme}>
<GlobalStyle />
<App />
</ThemeProvider>服务端渲染和 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 中是否包含 <style data-styled...> 标签，以及客户端控制台是否有 <code>Warning: Prop `className` did not match</style>。
