css-in-js生成的类名是运行时动态哈希值，不可预测且不导出为静态css文件，因此import或@import无法引用；复用样式应通过theme、props或css工具函数实现，而非硬编码类名。
你不能在纯 CSS 文件里“引入” CSS-in-JS 生成的临时类名——因为那些类名是运行时动态生成、不可预测的，也不出现在任何静态 CSS 文件中。
为什么 import 或 @import 对 styled-components/Emotion 类无效
CSS-in-JS 库（如 styled-components、@emotion/react）生成的类名类似 sc-aB3MQ fDyAEc，由哈希算法和组件路径决定，每次构建或渲染都可能不同。它们不是提前写死的字符串，也不会导出为 CSS 文件供 @import 引入。
- 你在
.css文件里写.sc-aB3MQ { ... }是徒劳的：类名可能下一秒就变，且 SSR 和客户端 hydration 时也可能不一致 -
@import './Button.css'这类语句加载的是静态资源，而 CSS-in-JS 样式是 JS 执行后才注入<style></style>标签的，两者不在同一编译/加载阶段 - 即使你用 DevTools 复制出当前类名并硬编码进 CSS，它也会在热更新、服务端渲染、甚至 React Strict Mode 的双渲染下失效
想复用 CSS-in-JS 组件样式？用 props 或主题透传
真正可行的方式，是让样式逻辑从 JS 层向下透传，而不是反向从 CSS 层去“抓取”类名。
- 把颜色、间距、圆角等可复用的值抽成 theme 对象，通过
ThemeProvider注入，再在styled函数里用props.theme.xxx访问 - 需要跨组件共享某组样式规则？定义一个公共的
css工具函数（Emotion）或createGlobalStyle（Styled Components），而不是试图在外部 CSS 里覆盖 - 若必须在非组件 JS 环境（如第三方插件）里应用同类样式，用
css函数生成内联 style 对象，而非依赖类名：const buttonStyle = css({ backgroundColor: 'blue', padding: '8px 16px' })
调试时看到的类名能直接用吗？
能临时用，但不推荐长期依赖。
- DevTools 里看到的
sc-xxx类名只是当前会话的快照，不是稳定标识符 - 开启
stylisPlugins、使用不同的 emotion cache key、甚至升级库版本，都可能导致类名生成规则变化 - 如果你在 E2E 测试里靠类名定位元素，应改用
data-testid属性，而非依赖 CSS-in-JS 的 class 输出
真正要解决“样式复用”问题，关键不是把 CSS-in-JS 的输出塞进传统 CSS，而是接受它的运行时本质：样式即数据，类名只是副作用。一旦试图绕过 JS 层去捕获类名，就等于放弃 CSS-in-JS 提供的作用域隔离和动态能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
