直接写 classname 无法真正隔离样式，因为 css 是全局作用域，类名冲突导致样式覆盖；真正隔离需运行时生成唯一哈希类名并绑定到 dom 节点。
为什么直接写 className 无法真正隔离样式？
因为 CSS 是全局作用域，哪怕你给组件起个 MyButton 类名，只要其他地方也用了 .MyButton，样式就会互相覆盖。尤其在多人协作或引入第三方 UI 库时，padding 被意外重置、color 被上游样式污染，非常常见。
真正隔离不是靠命名规范，而是让样式“附着在元素上”，且每次渲染生成唯一类名。主流方案如 styled-components 或 @emotion/styled 就是干这事的——它们在运行时注入带哈希后缀的类名，并把样式规则绑定到具体 DOM 节点。
styled 函数怎么避免重复创建样式实例？
每次调用 styled.div 都会生成新组件，但如果写在函数组件内部，每次 render 都会重新创建，导致 React 重新挂载 DOM、丢失 ref、触发多余副作用。这不是 bug，是设计使然——但你要主动避开。
- 把
styled组件定义在模块顶层（非函数内），复用同一构造器 - 需要动态样式时，用插值函数
{({ $primary }) => $primary ? 'blue' : 'gray'}，而不是拼字符串 - 别在
useEffect或事件回调里调用styled.button，那会泄漏样式规则且无法卸载
服务端渲染时，className 不匹配怎么办？
典型错误是：页面首屏由服务端渲染出 css-1a2b3c，客户端 hydrate 时却生成 css-4d5e6f，React 报 Prop `className` did not match。根本原因是服务端和客户端的哈希种子不一致。
解决方式取决于你用的库：
-
styled-components：服务端需传入ServerStyleSheet并调用collectStyles，客户端用StyleSheetManager注入 samecache -
@emotion/server：服务端用renderStylesToString，客户端必须用相同key初始化CacheProvider - 漏掉任何一端的 cache 同步，都会导致 className 错配
如何让第三方组件也接受你的主题变量？
很多 UI 库（比如 react-select）支持 styles prop，但它只认对象，不认 styled 返回的组件。这时候不能硬套，得换思路。
推荐做法是：用 css 工具函数（如 @emotion/css 的 css）生成 class 字符串，再透传过去：
const customSelectStyles = {
control: (base) => ({ ...base, backgroundColor: theme.bg }),
option: (base, state) => ({
...base,
color: state.isSelected ? theme.accent : theme.text,
'&:hover': css`background-color: ${theme.hover};`
})
};
注意：这里 css 返回的是字符串类名，不是组件；它能和传统 props 兼容，但没法享受组件级样式隔离的全部能力——该妥协的时候就得妥协。
样式隔离不是一劳永逸的事，它依赖构建时配置、运行时 cache 管理、以及对第三方库接口的理解。写错一行 cache 初始化，就可能让整个 SSR 失效；用错一个插值方式，就可能让样式无法响应状态变化。这些细节不显眼，但决定成败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
