ConfigProvider 全局配置
ConfigProvider 为它下面的所有 raft-ui 组件提供配置:主题、主题模式、主题覆盖、语言、组件默认值、类名前缀,以及浮层挂载到哪里。每个字段都会合并到最近的上层 Provider 之上,所以 Provider 可以嵌套。
演示
嵌套的主题作用域
设置了 theme 或 themeMode 的 Provider 会在自己的元素上开一个主题作用域。作用域可以嵌套:内层 Provider 从外层继承 elegant,只切换模式。
主题覆盖
themeOverrides 把 CSS 变量写到 Provider 的元素上。从被覆盖的基础 token 推导出来的 token 会跟着变。
切换语言
locale 设置 Provider 下面所有组件的界面文案。在 zhCN 和 enUS 之间切换:加载中的按钮和 Spinner 会用所选语言向读屏软件播报状态。语言包里缺的字段回落到 enUS。
Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
abstract | boolean | false | 不渲染元素,只提供上下文。设置了 theme、themeMode 或 themeOverrides 时会被忽略并给出警告。 | 未发布 |
bordered | boolean | undefined | 支持 bordered 的组件的默认值。 | 未发布 |
clsPrefix | string | "r" | 类名前缀。发布的 CSS 用的是 r,换前缀还需要用新前缀构建 CSS。 | 未发布 |
componentOptions | Record<string, Record<string, unknown>> | null | undefined | 每个组件的默认 props,按组件合并到上层之上。null 表示不再继承。 | 未发布 |
highlighter | CodeHighlighter | undefined | 给 Code 用的 Shiki 高亮器,需加载 codeTheme。raft-ui 不打包 Shiki,见 Code。undefined 继承上层。 | 未发布 |
locale | RLocale | null | undefined | 界面文案。undefined 继承上层;null 重置为 enUS。 | 未发布 |
namespace | string | undefined | 加到浮层挂载容器上的类名。 | 未发布 |
portalContainer | HTMLElement | null | document.body | 浮层挂载到哪里。 | 未发布 |
theme | "brutal" | "elegant" | undefined | 主题家族。undefined 继承上层。 | 未发布 |
themeMode | "light" | "dark" | undefined | 亮色或暗色。undefined 继承上层。 | 未发布 |
themeOverrides | Record<"--r-…", string> | null | undefined | 写到 Provider 元素上的 CSS 变量,合并到上层之上。null 表示不再继承。 | 未发布 |
语言
包里自带 enUS 和 zhCN。createLocale(partial, fallback) 用一份完整的语言包把不完整的语言包按命名空间补齐。
tsx
import { ConfigProvider, createLocale, enUS, zhCN } from "raft-ui";
const enGB = createLocale({ name: "en-GB", global: { cancel: "Dismiss" } }, enUS);
<ConfigProvider locale={zhCN}>…</ConfigProvider>;