跳到正文

ConfigProvider 全局配置

ConfigProvider 为它下面的所有 raft-ui 组件提供配置:主题、主题模式、主题覆盖、语言、组件默认值、类名前缀,以及浮层挂载到哪里。每个字段都会合并到最近的上层 Provider 之上,所以 Provider 可以嵌套。

演示

嵌套的主题作用域

设置了 theme 或 themeMode 的 Provider 会在自己的元素上开一个主题作用域。作用域可以嵌套:内层 Provider 从外层继承 elegant,只切换模式。

主题覆盖

themeOverrides 把 CSS 变量写到 Provider 的元素上。从被覆盖的基础 token 推导出来的 token 会跟着变。

切换语言

locale 设置 Provider 下面所有组件的界面文案。在 zhCN 和 enUS 之间切换:加载中的按钮和 Spinner 会用所选语言向读屏软件播报状态。语言包里缺的字段回落到 enUS。

Props

名称类型默认值说明版本
abstractbooleanfalse不渲染元素,只提供上下文。设置了 theme、themeMode 或 themeOverrides 时会被忽略并给出警告。未发布
borderedbooleanundefined支持 bordered 的组件的默认值。未发布
clsPrefixstring"r"类名前缀。发布的 CSS 用的是 r,换前缀还需要用新前缀构建 CSS。未发布
componentOptionsRecord<string, Record<string, unknown>> | nullundefined每个组件的默认 props,按组件合并到上层之上。null 表示不再继承。未发布
highlighterCodeHighlighterundefined给 Code 用的 Shiki 高亮器,需加载 codeTheme。raft-ui 不打包 Shiki,见 Code。undefined 继承上层。未发布
localeRLocale | nullundefined界面文案。undefined 继承上层;null 重置为 enUS。未发布
namespacestringundefined加到浮层挂载容器上的类名。未发布
portalContainerHTMLElement | nulldocument.body浮层挂载到哪里。未发布
theme"brutal" | "elegant"undefined主题家族。undefined 继承上层。未发布
themeMode"light" | "dark"undefined亮色或暗色。undefined 继承上层。未发布
themeOverridesRecord<"--r-…", string> | nullundefined写到 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>;