组件 · 配置

ConfigProvider 全局配置

为子树提供 mode(light/dark)、appearance(flat/layered)、size、colors 等作用域配置。省略时继承父级;无父级时 mode 默认 light、appearance 默认 flat、size 默认 md。系统外观由应用自行解析,不提供 appearance=system。不修改宿主 html 根字号。

入口 @selrux/ui/config-provider · 源码 src/entries/config-provider.ts · 1 个组件 · 发布状态 preview

使用建议

  • 避免:appearance=system
  • 避免:修改 html/body 根字号代替 fontBase
  • 限制:未标 stable
  • 限制:主题只覆盖 @selrux/ui 的公开 Token,不宣称同步第三方组件主题

引入

tsx
import { ConfigProvider } from '@selrux/ui/config-provider';

演练场

调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

子树内 Button / Input 随 size、mode 变化。

代码演示

尺寸

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-
dirDOM 与交互方向。省略时继承,无父级为 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