@layer 是目前最干净的分层控制手段，它通过显式声明层级优先级（如 @layer reset, chart, base...）来约束图表库全局样式，配合外层容器类名隔离动态浮层，比硬调权重或滥用 !important 更可靠、可维护。
直接加外层容器类名 + 用 @layer 显式分层，比硬改选择器权重或堆 !important 更可靠。
为什么图表库的 .chart 类会覆盖你写的 .chart-container
多数图表库（如 ECharts、Chart.js 封装组件、AntV）默认把样式注入到全局，且大量使用标签选择器（svg、canvas）、属性选择器（[data-chart]）甚至内联 style。它们不关心你的 CSS Modules 或 <style scoped>，渲染时直接往 body 或目标容器里塞 DOM，样式自然逃出作用域。
常见现象包括：
-
font-family被图表库重置成 sans-serif，覆盖你设的系统字体栈 -
svg text的fill、font-size异常，DevTools 里显示来自echarts.css且被划掉 - tooltip 浮层位置错乱，因为
body .echarts-tooltip和你写的.dashboard .tooltip权重打架
用 @layer 把图表样式“钉”在底层
@layer 是目前最干净的分层控制手段，尤其适合混用 Tailwind、自定义组件和第三方图表库的场景。它不依赖加载顺序，而是靠显式声明层级优先级。
立即学习“前端免费学习笔记（深入）”；
实操步骤：
- 在项目入口 CSS（如
main.css）顶部声明层级：@layer reset, chart, base, components, utilities;
- 把图表库的 CSS 用
@layer chart包裹（若它支持@import）：@layer chart { @import 'echarts/dist/echarts.min.css'; } - 确保你自己的图表定制样式写在更高层，比如：
@layer components { .chart-wrapper { max-width: 100%; } } - 若图表库只提供纯 CSS 文件（无
@import支持），就用构建工具前置处理：Vite 中配vite-plugin-css-layer，Webpack 中用postcss-import+postcss-layers
给图表容器加唯一父级类名并隔离作用域
这是兜底最稳的做法，尤其当图表库动态挂载浮层（如 ECharts tooltip、AntV 气泡提示）时，@layer 无法约束它的 DOM 位置，但外层类名可以。
关键点：
- 不要只给图表根节点加 class，要包裹整个使用区域：
<div class="analytics-dashboard"><EChartsComponent /></div>
- 所有图表相关样式都带前缀：
.analytics-dashboard svg { max-width: 100%; } .analytics-dashboard .echarts-tooltip { z-index: 1001; } - 对动态插入 body 的浮层，配合图表库 API 指定容器：
getPopupContainer: () => document.querySelector('.analytics-dashboard')（ECharts）或container: '.analytics-dashboard'（AntV） - 避免用
!important写在前缀规则里——它会让后续调试变成黑洞；真要覆盖，提高选择器精度，比如.analytics-dashboard .echarts-tooltip .tooltip-content
避开几个隐蔽但高频的坑
这些地方改了顺序或加了前缀也救不回来：
- 图表库通过 JS 直接设置
element.style.fontSize = '12px'—— 这是内联样式，权重 1000，CSS 规则根本压不住。解决：查文档看是否有textStyle配置项，从源头关掉内联 style - ECharts 的
theme配置里写了color: ['#1890ff', ...]，但它生成的 SVG<path>会带fill属性 —— 这不是 CSS，是 SVG 原生属性，.chart-wrapper path { fill: var(--primary) !important }无效。得用itemStyle.color或主题色变量重写 - 某些轻量图表库（如 Chart.js 插件）会
@importnormalize.css 或重置逻辑，和你项目里的 normalize 冲突。检查最终打包出的 CSS 文件，搜@import关键字，删掉重复引入 - Vite 构建时若启用了
css.codeSplitting，图表 CSS 可能被拆到异步 chunk，加载时机不可控。关掉它，或显式import 'echarts/dist/echarts.min.css'在主入口
真正难的不是选哪种方案，而是意识到：图表库的样式不是“CSS 规则”，它是渲染逻辑的一部分。你得同时盯住 CSS 层、JS 配置层、SVG 属性层，三者不一致，单改 CSS 就永远在打补丁。
