vue组件样式api应通过:style绑定css变量而非props，父组件注入--button-bg等带前缀的变量，子组件用var()引用并设默认值；scoped下需在根选择器声明变量，shadow dom须用:host注入，safari旧版仅支持单层回退。
组件样式API必须用style绑定变量，不是props
Vue组件的样式定制不该靠一堆props传颜色、尺寸、圆角——那会把UI逻辑和业务逻辑搅在一起。真正干净的样式API，是父组件通过style直接注入CSS变量，组件内部只做var(--button-bg)引用。
常见错误是写成：<mybutton color="red" size="large"></mybutton>，然后在组件里用v-if切class；这本质是把CSS写进了JS逻辑，主题切换时得改N个地方。
- 正确姿势：父组件写
<mybutton :style="{ '--button-bg': '#52c418', '--button-radius': '4px' }"></mybutton> - 组件根元素（如
<button class="btn"></button>）必须声明这些变量的默认值：.btn { --button-bg: #007bff; --button-radius: 6px; } - 所有内部样式都基于
var()计算，比如background-color: var(--button-bg); border-radius: var(--button-radius);
scoped下var()失效？检查变量是否定义在组件根选择器上
很多人写了:root { --button-bg: red; }，但组件里var(--button-bg)没生效——因为scoped样式被编译后加了属性选择器（如.btn[data-v-xxx]），而:root定义的变量不会自动穿透到这个作用域里。
真正起效的位置是组件自己的根选择器：
- Vue单文件组件中，
.btn或.my-card这类类名上必须声明变量，例如：.my-card { --card-padding: 1rem; --card-shadow: 0 2px 8px rgba(0,0,0,0.08); } - 如果用了
<template><div class="my-card">...</div></template>，那变量就得写在.my-card里，不能只写在:root或外层容器 - Web Components需在
:host里显式继承：:host { --button-bg: inherit; }，否则变量根本进不去 Shadow DOM
变量命名必须带组件前缀，--bg这种裸名迟早出事
写--bg、--color看着省事，但不同组件同时声明同名变量时，CSS层叠规则会按顺序覆盖——你改了Header.vue里的--bg，Sidebar.vue可能悄悄变色，连devtools都难定位。
前缀不是为了“好看”，是让变量具备语义归属和可维护性：
- 按组件粒度命名：
--button-bg、--input-border-radius、--card-header-padding - 状态后缀明确区分：
--button-bg-hover、--button-bg-disabled，别指望靠&:hover动态算 - 禁止在组件内部重复声明同名变量（如
.button { --button-bg: #1890ff; }），这等于切断外部控制能力
回退值写错，Safari 15.6以下直接白屏
var(--text-color, var(--fallback))这种嵌套回退写法，在Safari 15.6及更早版本中会被整个忽略，导致文本无色不可见——不是兼容性警告，是真实挂掉。
安全写法只有一层回退，且fallback必须是具体值：
- ✅ 正确：
color: var(--text-primary, #333); - ❌ 危险：
color: var(--text-primary, var(--text-default)); - ⚠️ 注意：
var(--size, 16px)没问题，但var(--size, calc(1em * 1.2))在旧版Safari里可能不解析
复杂点在于：变量作用域由声明位置决定，不是文件位置；同一变量在不同选择器里声明，就是不同作用域——这点容易被忽略，却直接影响换肤逻辑能否跑通。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
