CSS在现代框架中的引入_CSS-in-JS与模块化方案

styled-components样式不生效的根本原因是未配置babel-plugin-styled-components或ssr时未调用serverstylesheet.collectstyles()；css modules需用[hash:6]防冲突；vue中usecssmodule()须在setup()中调用；next.js中全局css仅限app/layout.tsx或globals.css引入。

React里用 styled-components 为什么样式不生效？

常见现象是组件渲染了，但预期的颜色、间距完全没变，甚至开发者工具里都看不到对应CSS规则。根本原因不是写法错，而是没配好Babel插件或服务端渲染时漏了关键步骤。

• 确保已安装并启用 babel-plugin-styled-components，否则开发环境可能正常，构建后样式丢失
• SSR场景下，必须在服务端调用 ServerStyleSheet.collectStyles()，再把生成的CSS字符串注入HTML的 <style></style> 标签中
• 不要直接在 styled.div 外层套一层普通div并试图用class控制样式——styled-components 的优先级靠内联生成的类名保证，混用容易被覆盖

`const Button = styled.button`   background: ${props => props.primary ? 'blue' : 'gray'}; `;

CSS Modules 的 localIdentName 怎么设才不踩坑？

默认的哈希名（如 Button_button_<em>kx9f2</em>）看着冗长，但随意改成 [name][local] 会引发冲突：多个文件里都有 container 类，打包后就撞车。

• 开发阶段可用 [path][name]__[local] 辅助调试，但构建时务必加 [hash:6] 或 [contenthash:6] 防止缓存失效或样式错乱
• 如果用webpack 5+，contenthash 更稳妥，它基于CSS内容而非文件路径计算
• 注意：Vite默认不支持自定义 localIdentName，得通过 css.modules.generateScopedName 配置项改，且只对 .module.css 生效

Vue 3组合式API里怎么安全用 useCssModule()？

这个函数看似方便，但实际容易漏掉响应式绑定或作用域隔离失败。

• 必须在 setup() 中调用，不能在 onMounted 或普通函数里——返回的是编译时静态映射，不是响应式对象
• 模板中要用 :class="styles['button']"，而不是 class="styles.button"（后者会被当字面量处理）
• 如果组件用了 defineAsyncComponent 动态加载，CSS Modules不会自动注入，得手动在异步组件内部再次调用 useCssModule()

Next.js 13+ App router 下全局CSS和模块CSS能混用吗？

能，但顺序和位置决定成败。App Router强制要求全局CSS只能在 app/layout.tsx 或 app/globals.css 中引入，其他地方 import 会报错。

立即学习“前端免费学习笔记（深入）”；

• app/globals.css 里的规则对整个应用生效，包括服务端渲染内容，所以不要在里面写依赖JS状态的伪类（如 :hover 在SSR首屏可能无效）
• 模块CSS（.module.css）只能在客户端组件中使用，服务端组件里 import 会触发错误：”Global CSS cannot be imported from files other than your Custom <code>_app.js”
• 如果需要动态切换主题，别用CSS变量塞进全局CSS，改用 className 切换预设的模块类名更可控

CSS-in-JS 的运行时开销、CSS Modules 的构建期命名逻辑、框架对全局样式的硬性约束——这些不是配置错了就能立刻看出来的点，得盯着构建产物和DevTools里的computed styles反复比对。