Emotion样式加载顺序由插入位置决定，非CSS优先级问题：默认插入head末尾，按JS执行顺序追加；SSR时顺序由服务端锁定；CacheProvider可自定义插入点，prepend=true使样式置顶；调试看data-emotion属性排序。
Emotion样式加载顺序由插入位置决定，不是CSS优先级问题
Emotion默认把样式插入到<head>末尾，组件内css函数或styled生成的样式块按JS执行顺序追加——先挂载的组件，样式表在前；后挂载的在后。这意味着“后定义的样式能覆盖先定义的同名规则”，但仅限于选择器权重完全相同时才生效。
- 不要指望靠写得晚就一定能覆盖第三方库样式——如果对方用了
!important或更具体的选择器（比如div.container button.primary），你的button { color: red }依然无效 - SSR场景下，服务端渲染的样式会提前注入
<style>标签，客户端hydrate时不再重复插入，此时顺序由服务端生成顺序锁定，JS执行顺序不影响 - 使用
@emotion/reactv11+时，CacheProvider可自定义插入点，比如指定插入到某个<div id="emotion-root">里，从而隔离样式作用域
用prepend强制样式前置，但小心破坏局部性
在创建Emotion cache时设prepend: true，会让所有通过该cache注入的样式插到<head>最前面。这适合全局重置、设计系统基础变量等必须最先生效的规则。
- 常见误用：给每个组件都配一个
prepend: truecache——结果是样式顺序又乱了，且失去按需注入优势 - 正确做法只在根组件用一次：
import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; const cache = createCache({ key: 'my-app', prepend: true }); // 然后在最外层包裹 <CacheProvider value={cache}>...</CacheProvider> - 注意：
prepend对Global组件无效，它始终插入到<head>末尾
组件级优先级冲突？优先改选择器结构，别硬堆!important
当两个styled组件样式打架（比如父组件设了color: blue，子组件想强制color: red），本质是CSS层叠逻辑没理清，不是Emotion的问题。
- 避免在组件内部写
!important——它会污染全局样式意图，后续维护者无法通过常规权重提升覆盖 - 推荐方案：用属性选择器或增加层级锚点，例如把子组件样式写成
styled.div`[data-role="alert"] & { color: red; }`，利用父容器的data-role制造更高权重 - 若必须动态控制优先级，用
className手动传入高权重类名，比依赖Emotion注入顺序更可控
调试样式顺序：看<style>标签的data-emotion属性
浏览器开发者工具里，Emotion注入的每个<style>标签都有data-emotion属性，值为缓存key + hash，比如my-app l2g4d8。按这个属性排序，就是真实生效顺序。
立即学习“前端免费学习笔记（深入）”；
- 发现某组件样式没生效？先查对应
<style>是否被插入，再看它的data-emotion值在所有Emotion标签中排第几 - 多个
CacheProvider嵌套时，不同key生成的<style>互不干扰，但它们在<head>里的物理顺序仍取决于React挂载顺序 - 禁用JS后样式消失？说明你依赖了运行时注入——这时应检查是否漏了SSR配置或
CacheProvider未正确包裹
