组件 · 配置
ConfigProvider 全局配置
为子树提供 mode(light/dark)、appearance(flat/layered)、size、colors 等作用域配置。省略时继承父级;无父级时 mode 默认 light、appearance 默认 flat、size 默认 md。系统外观由应用自行解析,不提供 appearance=system。不修改宿主 html 根字号。
使用建议
- 避免:appearance=system
- 避免:修改 html/body 根字号代替 fontBase
- 限制:未标 stable
- 限制:主题只覆盖 @selrux/ui 的公开 Token,不宣称同步第三方组件主题
引入
tsx
import { ConfigProvider } from '@selrux/ui/config-provider';演练场
调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
尺寸
size 为子树内组件的默认尺寸,组件显式 size 优先。
主题
mode 切换明暗,colors 覆盖语义色。
外观、字体与方向
appearance 为 flat / layered;fontFamily、fontBase 设定字体与基准字号;dir="rtl" 从右到左;locale 切换组件内置文案。
API
属性覆盖:示例用到 8 / 8 个自有属性(100%)
由 scripts/demo-coverage.mjs 统计,不含 className / style / 原生透传属性与纯转发事件。
ConfigProvider
配置子树的主题和行为。 ref 指向实际 div。更新配置不会更换这个根。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
style | 只作用于本根。结构化颜色请用 colors,不要靠自定义属性做跨域继承。 | CSSProperties | - |
className | 只作用于本根,不进入配置继承。 | string | - |
dir | DOM 与交互方向。省略时继承,无父级为 ltr。 | "ltr" | "rtl" | - |
size | 未写档位的控件使用的尺寸。省略时继承,无父级为 md。 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
fontFamily | 作用域字体家族。省略时沿用父级 CSS 变量。 | string | - |
mode | 明暗。省略时继承父级,无父级为 light。 | "light" | "dark" | - |
appearance | 扁平或分层表面。省略时继承,无父级为 flat。 | "flat" | "layered" | - |
colors | 角色色及成对前景。只覆盖传入的键。 | Partial<Record<"info" | "success" | "warning" | "error" | "primary" | "destructive" | "carbon" | "secondary" | "accent" | "primaryForeground" | "successForeground" | "errorForeground" | "warningForeground" | "infoForeground" | "carbonForeground" | "secondaryForeground" | "accentForeground" | "destructiveForeground", string>> | - |
fontBase | 作用域基础字号 B。省略时沿用父级 CSS 变量。 | string | - |
locale | 完整语言包。省略时继承,无父级为中文默认包。 | UiLocale | - |
children | 受本域配置影响的子树。 | ReactNode | - |
另有 274 项原生属性与事件继承自 HTMLAttributes,原样透传。
导出类型:ConfigProviderDomProps、ConfigProviderProps