CSS能否写在JS里？详解CSSinJS注入方式

CSS确实可以借助JavaScript动态注入实现“CSS-in-JS”，但这并非简单地把CSS当字符串塞进JS变量，而是通过创建style标签、调用CSSStyleSheet API或使用emotion等成熟库，在运行时精准生成并插入样式规则；这种方式真正价值在于解决传统CSS的全局污染、作用域混乱与动态能力不足等痛点，特别适合组件化开发、主题切换和基于props或状态的实时样式生成——它不是替代传统CSS的“炫技”，而是在需要JS驱动样式的场景下，提供更可控、更封装、更灵活的样式管理方案。

可以，CSS 能通过 JavaScript 动态注入到页面中，这就是常说的“CSS-in-JS”方式。它不是把 CSS 字符串直接写进 JS 语法里（比如当变量值），而是用 JS 创建样式规则、生成 style 标签或操作 CSSOM，最终让浏览器识别并应用样式。

常见的 CSS-in-JS 实现方式

主流做法有三类，适用场景略有不同：

• 动态创建