原生动态插入CSS最可控，需确保style.sheet就绪后再insertRule；Vue用v-bind()绑定响应式变量并更新:root自定义属性；卸载时务必通过id清理style元素，避免样式泄漏。
React里用 useEffect + document.styleSheets 动态插入CSS规则
原生方式最可控，不依赖第三方库，适合轻量主题切换或运行时样式覆盖。
常见错误是直接写 document.head.appendChild(styleEl) 后立刻查 document.styleSheets，但新样式表可能还没解析完成，导致 insertRule 报 DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet'。
- 先创建
<style></style>元素并挂载，再通过document.styleSheets[n]定位到它（推荐用id或遍历ownerNode匹配） - 确保调用
insertRule时样式表已就绪——可加setTimeout(..., 0)或监听load（仅对外链有效，内联需靠调度） - Vue 中同理，但建议在
onMounted里操作，避免 SSR 环境报错
useEffect(() => {
const style = document.createElement('style');
style.id = 'dynamic-theme';
document.head.appendChild(style);
const sheet = style.sheet;
// 确保 sheet 可写
setTimeout(() => {
sheet?.insertRule('.btn { background: #007bff; }', 0);
}, 0);
}, []);
Vue 3 的 <style scoped></style> + v-bind() 怎么动态改变量
这不是传统 CSS-in-JS，但 Vue 3.2+ 支持在 <style></style> 里用 v-bind() 绑定响应式 JS 值，本质是编译期生成 CSS 自定义属性，再由 JS 更新 :root 变量。
容易踩的坑：绑定的变量必须是顶层 ref 或 computed，不能是组件内部临时值；且只支持单个值（如颜色、尺寸），不支持选择器或媒体查询动态化。
立即学习“前端免费学习笔记（深入）”；
-
v-bind()写在<style scoped></style>内，会自动转成--v-bind-xxx自定义属性，并注入到组件根元素 - JS 侧更新要用
document.documentElement.style.setProperty('--primary-color', newColor)，不是直接改 ref - 若用
scoped，动态变量只影响当前组件；若想全局生效，得手动设到:root
<script setup>
const themeColor = ref('#42b883')
</script>
<template>
<div class="card">...</div>
</template>
<style scoped>
.card {
border-color: v-bind(themeColor);
}
</style>
为什么不用 styled-components 或 emotion 直接上？
它们确实是主流 CSS-in-JS 方案，但“动态注入”这个需求下，反而容易过重或失控。
典型问题：服务端渲染时，styled-components 的 ServerStyleSheet 必须严格匹配客户端 hydration，漏掉一个 collectStyles 就触发 checksum mismatch；而 emotion 的 css 函数在 React 18 并发模式下，若在 render 阶段调用会触发 warning（因可能重复执行）。
- 如果只是偶尔改几个样式，用原生 API 更稳——没序列化、没哈希冲突、没样式表注入时机竞争
- 若项目已用
styled-components，优先走ThemeProvider+props.theme，别在组件里反复调css生成新规则 - 注意
emotion的cache配置：开发环境默认启用 source map，上线务必关掉，否则影响首屏性能
CSS-in-JS 的真正难点不在“怎么插”，而在“什么时候删”
没人提，但最常出问题的是卸载逻辑：React 组件 unmount、Vue 组件 onUnmounted 时，动态插入的 <style></style> 不清理，就会越积越多，尤其在路由频繁切换或弹窗反复打开的场景下。
更隐蔽的是：多个组件共用同一套动态样式（比如都操作 #theme-style），一个组件删了，另一个还在用，直接崩。
- 务必给动态
<style></style>加唯一id，删除前先document.getElementById(id)?.remove() - 不要依赖
sheet.cssRules.length === 0来判断是否可删——IE 和部分旧版 Safari 不支持读取 cssRules - 如果样式是全局主题级的（如暗色模式），别随组件生命周期销毁，该用事件总线或状态管理统一控制
