定制主题

2024-07-09 16:33| 来源: 网络整理| 查看: 265

Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于全局样式（主色、圆角、边框）和指定组件的视觉定制。

在 5.0 版本的 Ant Design 中，我们提供了一套全新的定制主题方案。不同于 4.x 版本的 less 和 CSS 变量，有了 CSS-in-JS 的加持后，动态主题的能力也得到了加强，包括但不限于：

支持动态切换主题；支持同时存在多个主题；支持针对某个/某些组件修改主题变量；...配置主题

在 5.0 版本中我们把影响主题的最小元素称为 Design Token。通过修改 Design Token，我们可以呈现出各种各样的主题或者组件。通过在 ConfigProvider 中传入 theme 属性，可以配置主题。在升级 v5 后，将默认使用 v5 的主题。

WARNING

ConfigProvider 对 message.xxx、Modal.xxx、notification.xxx 等静态方法不会生效，原因是在这些方法中，antd 会通过 ReactDOM.render 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。

当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 Modal.useModal 方法返回 modal 实体以及 contextHolder 节点，将其插入到你需要获取 context 位置即可。也可通过 App 包裹组件简化 useModal 等方法需要手动植入 contextHolder 的问题。

修改主题变量

通过 theme 中的 token 属性，可以修改一些主题变量。部分主题变量会引起其他主题变量的变化，我们把这些主题变量称为 Seed Token。

import { Button, ConfigProvider, Space } from 'antd'; import React from 'react'; const App: React.FC = () => ( Primary Default ); export default App;Open on CodeSandboxOpen Sandbox使用预设算法

通过修改算法可以快速生成风格迥异的主题，5.0 版本中默认提供三套预设算法，分别是:

默认算法 theme.defaultAlgorithm暗色算法 theme.darkAlgorithm紧凑算法 theme.compactAlgorithm

你可以通过 theme 中的 algorithm 属性来切换算法，并且支持配置多种算法，将会依次生效。

import React from 'react'; import { Button, ConfigProvider, Input, Space, theme } from 'antd'; const App: React.FC = () => ( Submit ); export default App;Open on CodeSandboxOpen Sandbox修改组件变量

除了整体的 Design Token，各个组件也会开放自己的 Component Token 来实现针对组件的样式定制能力，不同的组件之间不会相互影响。同样地，也可以通过这种方式来覆盖组件的其他 Design Token。

组件级别的主题算法

默认情况下，所有组件变量都仅仅是覆盖，不会基于 Seed Token 计算派生变量。

在 >= 5.8.0 版本中，组件变量支持传入 algorithm 属性，可以开启派生计算或者传入其他算法。

import React from 'react'; import { ConfigProvider, Button, Space, Input, Divider } from 'antd'; const App: React.FC = () => ( 开启算法： Submit 禁用算法： Submit ); export default App;Open on CodeSandboxOpen Sandbox禁用动画

antd 默认内置了一些组件交互动效让企业级页面更加富有细节，在一些极端场景可能会影响页面交互性能，如需关闭动画可以 token 中的 motion 修改为 false：

import React from 'react'; import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd'; const App: React.FC = () => { const [checked, setChecked] = React.useState(false); const timerRef = React.useRef(); React.useEffect(() => { timerRef.current = setInterval(() => { setChecked((prev) => !prev); }, 500); return () => { if (timerRef.current) { clearInterval(timerRef.current); } }; }, []); const nodes = ( Checkbox Radio ); return ( {nodes} {nodes} ); }; export default App;Open on CodeSandboxOpen Sandbox进阶使用动态切换

在 v5 中，动态切换主题对用户来说是非常简单的，你可以在任何时候通过 ConfigProvider 的 theme 属性来动态切换主题，而不需要任何额外配置。

import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd'; import React from 'react'; const App: React.FC = () => { const [primary, setPrimary] = React.useState('#1677ff'); return ( setPrimary(color.toHexString())} /> Submit ); } export default App;Open on CodeSandboxOpen Sandbox局部主题（嵌套主题）

可以嵌套使用 ConfigProvider 来实现局部主题的更换。在子主题中未被改变的 Design Token 将会继承父主题。

import React from 'react'; import { Button, ConfigProvider, Space } from 'antd'; const App: React.FC = () => ( Theme 1 Theme 2 ); export default App;Open on CodeSandboxOpen Sandbox使用 Design Token

如果你希望使用当前主题下的 Design Token，我们提供了 useToken 这个 hook 来获取 Design Token。

import React from 'react'; import { Button, theme } from 'antd'; const { useToken } = theme; const App: React.FC = () => { const { token } = useToken(); return ( 使用 Design Token ); }; export default App;Open on CodeSandboxOpen Sandbox静态消费（如 less）

当你需要非 React 生命周期消费 Token 变量时，可以通过静态方法 getDesignToken 将其导出：

import { theme } from 'antd'; const { getDesignToken } = theme; const globalToken = getDesignToken();

getDesignToken 和 ConfigProvider 一样，支持传入 theme 属性，用于获取指定主题的 Design Token。

import type { ThemeConfig } from 'antd';import { theme } from 'antd';import { createRoot } from 'react-dom/client'; const { getDesignToken, useToken } = theme; const config: ThemeConfig = { token: { colorPrimary: '#1890ff', },}; // 通过静态方法获取const globalToken = getDesignToken(config); // 通过 hook 获取const App = () => { const { token } = useToken(); return null;}; // 渲染示意createRoot(document.getElementById('#app')).render( ,);

如果需要将其应用到静态样式编译框架，如 less 可以通过 less-loader 注入：

{ loader: "less-loader", options: { lessOptions: { modifyVars: mapToken, }, },}

兼容包提供了变量转换方法用于转成 v4 的 less 变量，如需使用点击此处查看详情。

调试主题

我们提供了帮助用户调试主题的工具：主题编辑器

你可以使用此工具自由地修改 Design Token，以达到你对主题的期望。

基本概念

在 Design Token 中我们提供了一套更加贴合设计的三层结构，将 Design Token 拆解为 Seed Token、Map Token 和 Alias Token 三部分。这三组 Token 并不是简单的分组，而是一个三层的派生关系，由 Seed Token 派生 Map Token，再由 Map Token 派生 Alias Token。在大部分情况下，使用 Seed Token 就可以满足定制主题的需要。但如果您需要更高程度的主题定制，您需要了解 antd 中 Design Token 的生命周期。

演变过程

token

基础变量（Seed Token）

Seed Token 意味着所有设计意图的起源。比如我们可以通过改变 colorPrimary 来改变主题色，antd 内部的算法会自动的根据 Seed Token 计算出对应的一系列颜色并应用：

const theme = { token: { colorPrimary: '#1890ff', },};梯度变量（Map Token）

Map Token 是基于 Seed 派生的梯度变量。定制 Map Token 推荐通过 theme.algorithm 来实现，这样可以保证 Map Token 之间的梯度关系。也可以通过 theme.token 覆盖，用于单独修改一些 map token 的值。

const theme = { token: { colorPrimaryBg: '#e6f7ff', },};别名变量（Alias Token）

Alias Token 用于批量控制某些共性组件的样式，基本上是 Map Token 别名，或者特殊处理过的 Map Token。

const theme = { token: { colorLink: '#1890ff', },};基本算法（algorithm)

基本算法用于将 Seed Token 展开为 Map Token，比如由一个基本色算出一个梯度色板，或者由一个基本的圆角算出各种大小的圆角。算法可以单独使用，也可以任意地组合使用，比如可以将暗色算法和紧凑算法组合使用，得到一个暗色和紧凑相结合的主题。

import { theme } from 'antd'; const { darkAlgorithm, compactAlgorithm } = theme; const theme = { algorithm: [darkAlgorithm, compactAlgorithm],};APITheme属性说明类型默认值token用于修改 Design TokenAliasToken-inherit继承上层 ConfigProvider 中配置的主题。booleantruealgorithm用于修改 Seed Token 到 Map Token 的算法(token: SeedToken) => MapToken | ((token: SeedToken) => MapToken)[]defaultAlgorithmcomponents用于修改各个组件的 Component Token 以及覆盖该组件消费的 Alias TokenComponentsConfig-cssVar开启 CSS 变量，参考使用 CSS 变量boolean | { prefix?: string; key?: string }falsehashed组件 class Hash 值，参考使用 CSS 变量booleantrueComponentsConfig属性说明类型默认值Component (可以是任意 antd 组件名，如 Button)用于修改 Component Token 以及覆盖该组件消费的 Alias TokenComponentToken & AliasToken & { algorithm: boolean | (token: SeedToken) => MapToken | ((token: SeedToken) => MapToken)[]}-

组件级别的 algorithm 默认为 false，此时组件 Token 仅仅会覆盖该组件使用的 token，不会进行派生计算。设置为 true 时会继承当前全局算法；也可以和全局的 algorithm 一样传入一个或多个算法，这将会针对该组件覆盖全局的算法。

SeedTokenToken 名称描述类型默认值borderRadius基础组件的圆角大小，例如按钮、输入框、卡片等number6colorBgBase用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token ！string#fffcolorError用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。string#ff4d4fcolorInfo用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。string#1677ffcolorLink控制超链接的颜色。string#1677ffcolorPrimary品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义string#1677ffcolorSuccess用于表示操作成功的 Token 序列，如 Result、Progress 等组件会使用该组梯度变量。string#52c41acolorTextBase用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token ！string#000colorWarning用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。string#faad14controlHeightAnt Design 中按钮和输入框等基础控件的高度number32fontFamilyAnt Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'fontFamilyCode代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素string'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospacefontSize设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。number14lineType用于控制组件边框、分割线等的样式，默认是实线stringsolidlineWidth用于控制组件边框、分割线等的宽度number1motion用于配置动画效果，为 `false` 时则关闭动画booleantruemotionBasenumber0motionEaseInBack预设动效曲率stringcubic-bezier(0.71, -0.46, 0.88, 0.6)motionEaseInOut预设动效曲率stringcubic-bezier(0.645, 0.045, 0.355, 1)motionEaseInOutCirc预设动效曲率stringcubic-bezier(0.78, 0.14, 0.15, 0.86)motionEaseInQuint预设动效曲率stringcubic-bezier(0.755, 0.05, 0.855, 0.06)motionEaseOut预设动效曲率stringcubic-bezier(0.215, 0.61, 0.355, 1)motionEaseOutBack预设动效曲率stringcubic-bezier(0.12, 0.4, 0.29, 1.46)motionEaseOutCirc预设动效曲率stringcubic-bezier(0.08, 0.82, 0.17, 1)motionEaseOutQuint预设动效曲率stringcubic-bezier(0.23, 1, 0.32, 1)motionUnit用于控制动画时长的变化单位number0.1opacityImagenumber1sizePopupArrow组件箭头的尺寸number16sizeStep用于控制组件尺寸的基础步长，尺寸步长结合尺寸变化单位，就可以派生各种尺寸梯度。通过调整步长即可得到不同的布局模式，例如 V5 紧凑模式下的尺寸步长为 2number4sizeUnit用于控制组件尺寸的变化单位，在 Ant Design 中我们的基础单位为 4 ，便于更加细致地控制尺寸梯度number4wireframe用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项booleanfalsezIndexBase所有组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 BackTop、 Affix 等number0zIndexPopupBase浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等number1000MapToken

继承所有 SeedToken 的属性

Token 名称描述类型默认值borderRadiusLGLG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。number8borderRadiusOuter外部圆角number4borderRadiusSMSM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角number4borderRadiusXSXS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。number2colorBgBlur控制毛玻璃容器的背景色，通常为透明色。stringtransparentcolorBgContainer组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。string#ffffffcolorBgElevated浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。string#ffffffcolorBgLayout该色用于页面整体布局的背景色，只有需要在页面中处于 B1 的视觉层级时才会使用该 token，其他用法都是错误的string#f5f5f5colorBgMask浮层的背景蒙层颜色，用于遮罩浮层下面的内容，Modal、Drawer 等组件的蒙层使用的是该 tokenstringrgba(0, 0, 0, 0.45)colorBgSpotlight该色用于引起用户强烈关注注意的背景色，目前只用在 Tooltip 的背景色上。stringrgba(0, 0, 0, 0.85)colorBorder默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。string#d9d9d9colorBorderSecondary比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。string#f0f0f0colorErrorActive错误色的深色激活态string#d9363ecolorErrorBg错误色的浅色背景颜色string#fff2f0colorErrorBgActive错误色的浅色背景色激活态string#ffccc7colorErrorBgHover错误色的浅色背景色悬浮态string#fff1f0colorErrorBorder错误色的描边色string#ffccc7colorErrorBorderHover错误色的描边色悬浮态string#ffa39ecolorErrorHover错误色的深色悬浮态string#ff7875colorErrorText错误色的文本默认态string#ff4d4fcolorErrorTextActive错误色的文本激活态string#d9363ecolorErrorTextHover错误色的文本悬浮态string#ff7875colorFill最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。stringrgba(0, 0, 0, 0.15)colorFillQuaternary最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。stringrgba(0, 0, 0, 0.02)colorFillSecondary二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。stringrgba(0, 0, 0, 0.06)colorFillTertiary三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。stringrgba(0, 0, 0, 0.04)colorInfoActive信息色的深色激活态。string#0958d9colorInfoBg信息色的浅色背景颜色。string#e6f4ffcolorInfoBgHover信息色的浅色背景色悬浮态。string#bae0ffcolorInfoBorder信息色的描边色。string#91caffcolorInfoBorderHover信息色的描边色悬浮态。string#69b1ffcolorInfoHover信息色的深色悬浮态。string#69b1ffcolorInfoText信息色的文本默认态。string#1677ffcolorInfoTextActive信息色的文本激活态。string#0958d9colorInfoTextHover信息色的文本悬浮态。string#4096ffcolorLinkActive控制超链接被点击时的颜色。string#0958d9colorLinkHover控制超链接悬浮时的颜色。string#69b1ffcolorPrimaryActive主色梯度下的深色激活态。string#0958d9colorPrimaryBg主色浅色背景颜色，一般用于视觉层级较弱的选中状态。string#e6f4ffcolorPrimaryBgHover与主色浅色背景颜色相对应的悬浮态颜色。string#bae0ffcolorPrimaryBorder主色梯度下的描边用色，用在 Slider 等组件的描边上。string#91caffcolorPrimaryBorderHover主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用。string#69b1ffcolorPrimaryHover主色梯度下的悬浮态。string#4096ffcolorPrimaryText主色梯度下的文本颜色。string#1677ffcolorPrimaryTextActive主色梯度下的文本激活态。string#0958d9colorPrimaryTextHover主色梯度下的文本悬浮态。string#4096ffcolorSuccessActive成功色的深色激活态string#389e0dcolorSuccessBg成功色的浅色背景颜色，用于 Tag 和 Alert 的成功态背景色string#f6ffedcolorSuccessBgHover成功色浅色背景颜色，一般用于视觉层级较弱的选中状态，不过 antd 目前没有使用到该 tokenstring#d9f7becolorSuccessBorder成功色的描边色，用于 Tag 和 Alert 的成功态描边色string#b7eb8fcolorSuccessBorderHover成功色的描边色悬浮态string#95de64colorSuccessHover成功色的深色悬浮态string#95de64colorSuccessText成功色的文本默认态string#52c41acolorSuccessTextActive成功色的文本激活态string#389e0dcolorSuccessTextHover成功色的文本悬浮态string#73d13dcolorText最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。stringrgba(0, 0, 0, 0.88)colorTextQuaternary第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。stringrgba(0, 0, 0, 0.25)colorTextSecondary作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。stringrgba(0, 0, 0, 0.65)colorTextTertiary第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。stringrgba(0, 0, 0, 0.45)colorWarningActive警戒色的深色激活态string#d48806colorWarningBg警戒色的浅色背景颜色string#fffbe6colorWarningBgHover警戒色的浅色背景色悬浮态string#fff1b8colorWarningBorder警戒色的描边色string#ffe58fcolorWarningBorderHover警戒色的描边色悬浮态string#ffd666colorWarningHover警戒色的深色悬浮态string#ffd666colorWarningText警戒色的文本默认态string#faad14colorWarningTextActive警戒色的文本激活态string#d48806colorWarningTextHover警戒色的文本悬浮态string#ffc53dcolorWhite不随主题变化的纯白色string#fffcontrolHeightLG较高的组件高度number40controlHeightSM较小的组件高度number24controlHeightXS更小的组件高度number16fontSizeHeading1H1 标签所使用的字号number38fontSizeHeading2h2 标签所使用的字号number30fontSizeHeading3h3 标签使用的字号number24fontSizeHeading4h4 标签使用的字号number20fontSizeHeading5h5 标签使用的字号number16fontSizeLG大号字体大小number16fontSizeSM小号字体大小number12fontSizeXL超大号字体大小number20lineHeight文本行高number1.5714285714285714lineHeightHeading1H1 标签所使用的行高number1.2105263157894737lineHeightHeading2h2 标签所使用的行高number1.2666666666666666lineHeightHeading3h3 标签所使用的行高number1.3333333333333333lineHeightHeading4h4 标签所使用的行高number1.4lineHeightHeading5h5 标签所使用的行高number1.5lineHeightLG大型文本行高number1.5lineHeightSM小型文本行高number1.6666666666666667lineWidthBold描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。number2motionDurationFast动效播放速度，快速。用于小型元素动画交互string0.1smotionDurationMid动效播放速度，中速。用于中型元素动画交互string0.2smotionDurationSlow动效播放速度，慢速。用于大型元素如面板动画交互string0.3ssize默认尺寸number16sizeLGnumber24sizeMDnumber20sizeMSnumber16sizeSMnumber12sizeXLnumber32sizeXSnumber8sizeXXLnumber48sizeXXSnumber4AliasToken

继承所有 SeedToken 和 MapToken 的属性

Token 名称描述类型默认值boxShadow控制元素阴影样式。string 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) boxShadowSecondary控制元素二级阴影样式。string 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) boxShadowTertiary控制元素三级盒子阴影样式。string 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02) colorBgContainerDisabled控制容器在禁用状态下的背景色。stringrgba(0, 0, 0, 0.04)colorBgTextActive控制文本在激活状态下的背景色。stringrgba(0, 0, 0, 0.15)colorBgTextHover控制文本在悬停状态下的背景色。stringrgba(0, 0, 0, 0.06)colorBorderBg控制元素背景边框的颜色。string#ffffffcolorErrorOutline控制输入组件错误状态下的外轮廓线颜色。stringrgba(255, 38, 5, 0.06)colorFillAlter控制元素替代背景色。stringrgba(0, 0, 0, 0.02)colorFillContent控制内容区域的背景色。stringrgba(0, 0, 0, 0.06)colorFillContentHover控制内容区域背景色在鼠标悬停时的样式。stringrgba(0, 0, 0, 0.15)colorHighlight控制页面元素高亮时的颜色。string#ff4d4fcolorIcon控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。 *stringrgba(0, 0, 0, 0.45)colorIconHover控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。stringrgba(0, 0, 0, 0.88)colorSplit用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。stringrgba(5, 5, 5, 0.06)colorTextDescription控制文本描述字体颜色。stringrgba(0, 0, 0, 0.45)colorTextDisabled控制禁用状态下的字体颜色。stringrgba(0, 0, 0, 0.25)colorTextHeading控制标题字体颜色。stringrgba(0, 0, 0, 0.88)colorTextLabel控制文本标签字体颜色。stringrgba(0, 0, 0, 0.65)colorTextLightSolid控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。string#fffcolorTextPlaceholder控制占位文本的颜色。stringrgba(0, 0, 0, 0.25)colorWarningOutline控制输入组件警告状态下的外轮廓线颜色。stringrgba(255, 215, 5, 0.1)controlInteractiveSize控制组件的交互大小。number16controlItemBgActive控制组件项在激活状态下的背景颜色。string#e6f4ffcontrolItemBgActiveDisabled控制组件项在禁用状态下的激活背景颜色。stringrgba(0, 0, 0, 0.15)controlItemBgActiveHover控制组件项在鼠标悬浮且激活状态下的背景颜色。string#bae0ffcontrolItemBgHover控制组件项在鼠标悬浮时的背景颜色。stringrgba(0, 0, 0, 0.04)controlOutline控制输入组件的外轮廓线颜色。stringrgba(5, 145, 255, 0.1)controlOutlineWidth控制输入组件的外轮廓线宽度。number2controlPaddingHorizontal控制元素水平内间距。number12controlPaddingHorizontalSM控制元素中小尺寸水平内间距。number8fontSizeIcon控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。number12fontWeightStrong控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。number600lineWidthFocus控制线条的宽度，当组件处于聚焦态时。number4linkDecoration控制链接文本的装饰样式。undefined | TextDecorationnonelinkFocusDecoration控制链接聚焦时文本的装饰样式。undefined | TextDecorationnonelinkHoverDecoration控制链接鼠标悬浮时文本的装饰样式。undefined | TextDecorationnonemargin控制元素外边距，中等尺寸。number16marginLG控制元素外边距，大尺寸。number24marginMD控制元素外边距，中大尺寸。number20marginSM控制元素外边距，中小尺寸。number12marginXL控制元素外边距，超大尺寸。number32marginXS控制元素外边距，小尺寸。number8marginXXL控制元素外边距，最大尺寸。number48marginXXS控制元素外边距，最小尺寸。number4opacityLoading控制加载状态的透明度。number0.65padding控制元素的内间距。number16paddingContentHorizontal控制内容元素水平内间距。number16paddingContentHorizontalLG控制内容元素水平内间距，适用于大屏幕设备。number24paddingContentHorizontalSM控制内容元素水平内间距，适用于小屏幕设备。number16paddingContentVertical控制内容元素垂直内间距。number12paddingContentVerticalLG控制内容元素垂直内间距，适用于大屏幕设备。number16paddingContentVerticalSM控制内容元素垂直内间距，适用于小屏幕设备。number8paddingLG控制元素的大内间距。number24paddingMD控制元素的中等内间距。number20paddingSM控制元素的小内间距。number12paddingXL控制元素的特大内间距。number32paddingXS控制元素的特小内间距。number8paddingXXS控制元素的极小内间距。number4screenLG控制大屏幕的屏幕宽度。number992screenLGMax控制大屏幕的最大宽度。number1199screenLGMin控制大屏幕的最小宽度。number992screenMD控制中等屏幕的屏幕宽度。number768screenMDMax控制中等屏幕的最大宽度。number991screenMDMin控制中等屏幕的最小宽度。number768screenSM控制小屏幕的屏幕宽度。number576screenSMMax控制小屏幕的最大宽度。number767screenSMMin控制小屏幕的最小宽度。number576screenXL控制超大屏幕的屏幕宽度。number1200screenXLMax控制超大屏幕的最大宽度。number1599screenXLMin控制超大屏幕的最小宽度。number1200screenXS控制超小屏幕的屏幕宽度。number480screenXSMax控制超小屏幕的最大宽度。number575screenXSMin控制超小屏幕的最小宽度。number480screenXXL控制超超大屏幕的屏幕宽度。number1600screenXXLMin控制超超大屏幕的最小宽度。number1600FAQ为什么 theme 从 undefined 变为对象或者变为 undefined 时组件重新 mount 了？

在 ConfigProvider 中我们通过 DesignTokenContext 传递 context，theme 为 undefined 时不会套一层 Provider，所以从无到有或者从有到无时 React 的 VirtualDOM 结构变化，导致组件重新 mount。解决方法：将 undefined 替换为空对象 {} 即可。

【本文地址】

定制主题

定制主题

今日新闻

推荐新闻