StyleProvider 样式定制

两端独立同源，API、安装、默认值设置和运行逻辑一致；仅平台标识与本地导入不同。

基础示例

基础用法

按钮只切换本例外层 section 的局部变量：关闭时文字继承父级颜色，内层 coral 覆盖和外部文字不变；再次切换恢复 teal。该 Demo 不调用全局 setStyleVars，不能用它验证全局主题注入、替换或清理。

局部变量按 DOM 继承，嵌套 Provider 可覆盖父级变量；传入 null 清除本层覆盖（仍会继承父级）。通过 popupContainer 移到 Provider 外的节点不继承局部变量。组件式调用不修改全局主题属性。

局部组件定制优先设置实际 component 变量；只改 palette/system 变量，不会自动重算从根节点继承的组件别名。需要局部联动时在本层显式重声明相关映射；这不是自动完整主题重建。弹层变量放在真实挂载宿主。详见Design Token 与 CSS 变量分层。

全局调用

import { StyleProvider, Themes } from '@cedar-design/ui'

StyleProvider.setStyleVars(Themes.default.dark)
StyleProvider.setStyleVars(Themes.maple.light)
StyleProvider.setStyleVars(null)

每次调用替换上次注入，不累计合并。与当前基础样式一致的变量不重复写入。 dark 设置 html[cedar-theme="dark"]；light 移除该属性。未提供 color-scheme 时保留现有主题属性；null 移除本库注入和主题属性，不影响另一库。SSR 中函数调用无副作用。

变量支持完整 CSS 名称，也支持驼峰（如 cColorScheme）；不会自动补充库前缀。推荐完整 --c-* 名称。

安装与默认值

import { StyleProvider } from '@cedar-design/ui'

app.use(StyleProvider)

StyleProvider.setPropsDefaults({
  tag: 'section',
  styleVars: () => ({ '--c-demo-color': 'teal' }),
})

在应用初始化、挂载组件之前设置默认值，不追溯更新已挂载实例；显式 Props 优先。对象形式会为每个实例复制变量对象，也支持工厂和 null。默认配置仅属于本库，不跨库共享。 安装固定注册 CStyleProvider，不修改应用全局配置；自定义别名使用 app.component('MyStyleProvider', StyleProvider)。

API

属性	说明	类型	默认值
style-vars	局部变量，null 清空本层覆盖	Record<string, string> | null	{}
tag	包裹标签	string	div

默认插槽为组件内容，无事件。

类型定义

导出 StyleVars、StyleProviderProps、StyleProviderDefaults、StyleProviderInstance；运行时只以 StyleProvider 作为公开组件入口，另导出 styleProviderProps 和供 resolver 使用的 _StyleProviderComponent。

本组件不声明专属主题 token；变量值为字符串，数字尺寸请写成带单位的字符串。