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反复比对。
