feat: migrate less to token for Switch (#42192)

* feat: migrate less to token for Switch * chore: add demo * chore: code clean * chore: update demo * docs: update docs en * chore: code clean --------- Co-authored-by: MadCcc <1075746765@qq.com>
2025-06-12 04:13:13 +08:00 · 2023-08-16 19:17:12 +08:00 · 2023-08-16 19:17:12 +08:00 · b9f77fde6c
commit b9f77fde6c
parent 65989b4eff
10 changed files with 265 additions and 114 deletions
--- a/components/switch/tests/demo-extend.test.ts
+++ b/components/switch/tests/demo-extend.test.ts
@ -1,3 +1,5 @@
 import { extendTest } from '../../../tests/shared/demoTest';

-extendTest('switch');
+extendTest('switch', {
+  skip: ['component-token.tsx'],
+});
--- a/components/switch/tests/demo.test.ts
+++ b/components/switch/tests/demo.test.ts
@ -1,3 +1,5 @@
 import demoTest from '../../../tests/shared/demoTest';

-demoTest('switch');
+demoTest('switch', {
+  skip: ['component-token.tsx'],
+});
--- a/components/switch/demo/component-token.md
+++ b/components/switch/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+自定义组件 Token。
+
+## en-US
+
+Custom component token.
--- a/components/switch/demo/component-token.tsx
+++ b/components/switch/demo/component-token.tsx
@ -0,0 +1,30 @@
+import React from 'react';
+import { ConfigProvider, Space, Switch } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Switch: {
+          trackHeight: 14,
+          trackMinWidth: 32,
+          // opacityLoading: 0.1,
+          colorPrimary: 'rgb(25, 118, 210, 0.5)',
+          trackPadding: -3,
+          handleSize: 20,
+          handleBg: 'rgb(25, 118, 210)',
+          handleShadow:
+            'rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px',
+          // innerMinMargin: 4,
+          // innerMaxMargin: 8,
+        },
+      },
+    }}
+  >
+    <Space>
+      <Switch defaultChecked />
+    </Space>
+  </ConfigProvider>
+);
+
+export default App;
--- a/components/switch/index.en-US.md
+++ b/components/switch/index.en-US.md
@ -23,6 +23,7 @@ Switching Selector.
 <code src="./demo/text.tsx">Text & icon</code>
 <code src="./demo/size.tsx">Two sizes</code>
 <code src="./demo/loading.tsx">Loading</code>
+<code src="./demo/component-token.tsx" debug>Custom component token</code>

 ## API

--- a/components/switch/index.zh-CN.md
+++ b/components/switch/index.zh-CN.md
@ -24,6 +24,7 @@ demo:
 <code src="./demo/text.tsx">文字和图标</code>
 <code src="./demo/size.tsx">两种大小</code>
 <code src="./demo/loading.tsx">加载中</code>
+<code src="./demo/component-token.tsx" debug>自定义组件 Token</code>

 ## API

--- a/components/switch/style/index.ts
+++ b/components/switch/style/index.ts
@ -4,89 +4,152 @@ import { genFocusStyle, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';

+export interface ComponentToken {
+  /**
+   *  @desc 开关高度
+   *  @descEN Height of Switch
+   */
+  trackHeight: number;
+  /**
+   * @desc 小号开关高度
+   * @descEN Height of small Switch
+   */
+  trackHeightSM: number;
+  /**
+   * @desc 开关最小宽度
+   * @descEN Minimum width of Switch
+   */
+  trackMinWidth: number;
+  /**
+   * @desc 小号开关最小宽度
+   * @descEN Minimum width of small Switch
+   */
+  trackMinWidthSM: number;
+  /**
+   * @desc 开关内边距
+   * @descEN Padding of Switch
+   */
+  trackPadding: number;
+  /**
+   * @desc 开关把手背景色
+   * @descEN Background color of Switch handle
+   */
+  handleBg: string;
+  /**
+   * @desc 开关把手阴影
+   * @descEN Shadow of Switch handle
+   */
+  handleShadow: string;
+  /**
+   * @desc 开关把手大小
+   * @descEN Size of Switch handle
+   */
+  handleSize: number;
+  /**
+   * @desc 小号开关把手大小
+   * @descEN Size of small Switch handle
+   */
+  handleSizeSM: number;
+  /**
+   * @desc 内容区域最小边距
+   * @descEN Minimum margin of content area
+   */
+  innerMinMargin: number;
+  /**
+   * @desc 内容区域最大边距
+   * @descEN Maximum margin of content area
+   */
+  innerMaxMargin: number;
+  /**
+   * @desc 小号开关内容区域最小边距
+   * @descEN Minimum margin of content area of small Switch
+   */
+  innerMinMarginSM: number;
+  /**
+   * @desc 小号开关内容区域最大边距
+   * @descEN Maximum margin of content area of small Switch
+   */
+  innerMaxMarginSM: number;
+}
+
 interface SwitchToken extends FullToken<'Switch'> {
-  switchMinWidth: number;
-  switchHeight: number;
  switchDuration: string;
  switchColor: string;
  switchDisabledOpacity: number;
-  switchInnerMarginMin: number;
-  switchInnerMarginMax: number;
-  switchPadding: number;
-  switchPinSize: number;
-  switchBg: string;
-  switchMinWidthSM: number;
-  switchHeightSM: number;
-  switchInnerMarginMinSM: number;
-  switchInnerMarginMaxSM: number;
-  switchPinSizeSM: number;
-  switchHandleShadow: string;
  switchLoadingIconSize: number;
  switchLoadingIconColor: string;
  switchHandleActiveInset: string;
 }

 const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const {
+    componentCls,
+    trackHeightSM,
+    trackPadding,
+    trackMinWidthSM,
+    innerMinMarginSM,
+    innerMaxMarginSM,
+    handleSizeSM,
+  } = token;
  const switchInnerCls = `${componentCls}-inner`;

  return {
    [componentCls]: {
      [`&${componentCls}-small`]: {
-        minWidth: token.switchMinWidthSM,
-        height: token.switchHeightSM,
-        lineHeight: `${token.switchHeightSM}px`,
+        minWidth: trackMinWidthSM,
+        height: trackHeightSM,
+        lineHeight: `${trackHeightSM}px`,

        [`${componentCls}-inner`]: {
-          paddingInlineStart: token.switchInnerMarginMaxSM,
-          paddingInlineEnd: token.switchInnerMarginMinSM,
+          paddingInlineStart: innerMaxMarginSM,
+          paddingInlineEnd: innerMinMarginSM,
          [`${switchInnerCls}-checked`]: {
-            marginInlineStart: `calc(-100% + ${
-              token.switchPinSizeSM + token.switchPadding * 2
-            }px - ${token.switchInnerMarginMaxSM * 2}px)`,
-            marginInlineEnd: `calc(100% - ${token.switchPinSizeSM + token.switchPadding * 2}px + ${
-              token.switchInnerMarginMaxSM * 2
+            marginInlineStart: `calc(-100% + ${handleSizeSM + trackPadding * 2}px - ${
+              innerMaxMarginSM * 2
+            }px)`,
+            marginInlineEnd: `calc(100% - ${handleSizeSM + trackPadding * 2}px + ${
+              innerMaxMarginSM * 2
            }px)`,
          },

          [`${switchInnerCls}-unchecked`]: {
-            marginTop: -token.switchHeightSM,
+            marginTop: -trackHeightSM,
            marginInlineStart: 0,
            marginInlineEnd: 0,
          },
        },

        [`${componentCls}-handle`]: {
-          width: token.switchPinSizeSM,
-          height: token.switchPinSizeSM,
+          width: handleSizeSM,
+          height: handleSizeSM,
        },

        [`${componentCls}-loading-icon`]: {
-          top: (token.switchPinSizeSM - token.switchLoadingIconSize) / 2,
+          top: (handleSizeSM - token.switchLoadingIconSize) / 2,
          fontSize: token.switchLoadingIconSize,
        },

        [`&${componentCls}-checked`]: {
          [`${componentCls}-inner`]: {
-            paddingInlineStart: token.switchInnerMarginMinSM,
-            paddingInlineEnd: token.switchInnerMarginMaxSM,
+            paddingInlineStart: innerMinMarginSM,
+            paddingInlineEnd: innerMaxMarginSM,
            [`${switchInnerCls}-checked`]: {
              marginInlineStart: 0,
              marginInlineEnd: 0,
            },

            [`${switchInnerCls}-unchecked`]: {
-              marginInlineStart: `calc(100% - ${
-                token.switchPinSizeSM + token.switchPadding * 2
-              }px + ${token.switchInnerMarginMaxSM * 2}px)`,
-              marginInlineEnd: `calc(-100% + ${
-                token.switchPinSizeSM + token.switchPadding * 2
-              }px - ${token.switchInnerMarginMaxSM * 2}px)`,
+              marginInlineStart: `calc(100% - ${handleSizeSM + trackPadding * 2}px + ${
+                innerMaxMarginSM * 2
+              }px)`,
+              marginInlineEnd: `calc(-100% + ${handleSizeSM + trackPadding * 2}px - ${
+                innerMaxMarginSM * 2
+              }px)`,
            },
          },

          [`${componentCls}-handle`]: {
-            insetInlineStart: `calc(100% - ${token.switchPinSizeSM + token.switchPadding}px)`,
+            insetInlineStart: `calc(100% - ${handleSizeSM + trackPadding}px)`,
          },
        },

@ -111,13 +174,13 @@ const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
 };

 const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const { componentCls, handleSize } = token;

  return {
    [componentCls]: {
      [`${componentCls}-loading-icon${token.iconCls}`]: {
        position: 'relative',
-        top: (token.switchPinSize - token.fontSize) / 2,
+        top: (handleSize - token.fontSize) / 2,
        color: token.switchLoadingIconColor,
        verticalAlign: 'top',
      },
@ -130,17 +193,17 @@ const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = (token) =>
 };

 const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
-  const { componentCls, motion } = token;
+  const { componentCls, motion, trackPadding, handleBg, handleShadow, handleSize } = token;
  const switchHandleCls = `${componentCls}-handle`;

  return {
    [componentCls]: {
      [switchHandleCls]: {
        position: 'absolute',
-        top: token.switchPadding,
-        insetInlineStart: token.switchPadding,
-        width: token.switchPinSize,
-        height: token.switchPinSize,
+        top: trackPadding,
+        insetInlineStart: trackPadding,
+        width: handleSize,
+        height: handleSize,
        transition: `all ${token.switchDuration} ease-in-out`,

        '&::before': {
@ -149,16 +212,16 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
          insetInlineEnd: 0,
          bottom: 0,
          insetInlineStart: 0,
-          backgroundColor: token.colorWhite,
-          borderRadius: token.switchPinSize / 2,
-          boxShadow: token.switchHandleShadow,
+          backgroundColor: handleBg,
+          borderRadius: handleSize / 2,
+          boxShadow: handleShadow,
          transition: `all ${token.switchDuration} ease-in-out`,
          content: '""',
        },
      },

      [`&${componentCls}-checked ${switchHandleCls}`]: {
-        insetInlineStart: `calc(100% - ${token.switchPinSize + token.switchPadding}px)`,
+        insetInlineStart: `calc(100% - ${handleSize + trackPadding}px)`,
      },

      [`&:not(${componentCls}-disabled):active`]: motion
@ -180,7 +243,8 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
 };

 const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const { componentCls, trackHeight, trackPadding, innerMinMargin, innerMaxMargin, handleSize } =
+    token;
  const switchInnerCls = `${componentCls}-inner`;

  return {
@ -190,8 +254,8 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
        overflow: 'hidden',
        borderRadius: 100,
        height: '100%',
-        paddingInlineStart: token.switchInnerMarginMax,
-        paddingInlineEnd: token.switchInnerMarginMin,
+        paddingInlineStart: innerMaxMargin,
+        paddingInlineEnd: innerMinMargin,
        transition: `padding-inline-start ${token.switchDuration} ease-in-out, padding-inline-end ${token.switchDuration} ease-in-out`,

        [`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
@ -203,35 +267,35 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
        },

        [`${switchInnerCls}-checked`]: {
-          marginInlineStart: `calc(-100% + ${token.switchPinSize + token.switchPadding * 2}px - ${
-            token.switchInnerMarginMax * 2
+          marginInlineStart: `calc(-100% + ${handleSize + trackPadding * 2}px - ${
+            innerMaxMargin * 2
          }px)`,
-          marginInlineEnd: `calc(100% - ${token.switchPinSize + token.switchPadding * 2}px + ${
-            token.switchInnerMarginMax * 2
+          marginInlineEnd: `calc(100% - ${handleSize + trackPadding * 2}px + ${
+            innerMaxMargin * 2
          }px)`,
        },

        [`${switchInnerCls}-unchecked`]: {
-          marginTop: -token.switchHeight,
+          marginTop: -trackHeight,
          marginInlineStart: 0,
          marginInlineEnd: 0,
        },
      },

      [`&${componentCls}-checked ${switchInnerCls}`]: {
-        paddingInlineStart: token.switchInnerMarginMin,
-        paddingInlineEnd: token.switchInnerMarginMax,
+        paddingInlineStart: innerMinMargin,
+        paddingInlineEnd: innerMaxMargin,
        [`${switchInnerCls}-checked`]: {
          marginInlineStart: 0,
          marginInlineEnd: 0,
        },

        [`${switchInnerCls}-unchecked`]: {
-          marginInlineStart: `calc(100% - ${token.switchPinSize + token.switchPadding * 2}px + ${
-            token.switchInnerMarginMax * 2
+          marginInlineStart: `calc(100% - ${handleSize + trackPadding * 2}px + ${
+            innerMaxMargin * 2
          }px)`,
-          marginInlineEnd: `calc(-100% + ${token.switchPinSize + token.switchPadding * 2}px - ${
-            token.switchInnerMarginMax * 2
+          marginInlineEnd: `calc(-100% + ${handleSize + trackPadding * 2}px - ${
+            innerMaxMargin * 2
          }px)`,
        },
      },
@ -239,15 +303,15 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
      [`&:not(${componentCls}-disabled):active`]: {
        [`&:not(${componentCls}-checked) ${switchInnerCls}`]: {
          [`${switchInnerCls}-unchecked`]: {
-            marginInlineStart: token.switchPadding * 2,
-            marginInlineEnd: -token.switchPadding * 2,
+            marginInlineStart: trackPadding * 2,
+            marginInlineEnd: -trackPadding * 2,
          },
        },

        [`&${componentCls}-checked ${switchInnerCls}`]: {
          [`${switchInnerCls}-checked`]: {
-            marginInlineStart: -token.switchPadding * 2,
-            marginInlineEnd: token.switchPadding * 2,
+            marginInlineStart: -trackPadding * 2,
+            marginInlineEnd: trackPadding * 2,
          },
        },
      },
@ -256,7 +320,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
 };

 const genSwitchStyle = (token: SwitchToken): CSSObject => {
-  const { componentCls } = token;
+  const { componentCls, trackHeight, trackMinWidth } = token;

  return {
    [componentCls]: {
@ -265,9 +329,9 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
      position: 'relative',
      display: 'inline-block',
      boxSizing: 'border-box',
-      minWidth: token.switchMinWidth,
-      height: token.switchHeight,
-      lineHeight: `${token.switchHeight}px`,
+      minWidth: trackMinWidth,
+      height: trackHeight,
+      lineHeight: `${trackHeight}px`,
      verticalAlign: 'middle',
      background: token.colorTextQuaternary,
      border: '0',
@ -309,48 +373,57 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
 };

 // ============================== Export ==============================
-export default genComponentStyleHook('Switch', (token) => {
-  const switchHeight = token.fontSize * token.lineHeight;
-  const switchHeightSM = token.controlHeight / 2;
-  const switchPadding = 2; // This is magic
-  const switchPinSize = switchHeight - switchPadding * 2;
-  const switchPinSizeSM = switchHeightSM - switchPadding * 2;
+export default genComponentStyleHook(
+  'Switch',
+  (token) => {
+    const switchToken = mergeToken<SwitchToken>(token, {
+      switchDuration: token.motionDurationMid,
+      switchColor: token.colorPrimary,
+      switchDisabledOpacity: token.opacityLoading,
+      switchLoadingIconSize: token.fontSizeIcon * 0.75,
+      switchLoadingIconColor: `rgba(0, 0, 0, ${token.opacityLoading})`,
+      switchHandleActiveInset: '-30%',
+    });

-  const switchToken = mergeToken<SwitchToken>(token, {
-    switchMinWidth: switchPinSize * 2 + switchPadding * 4,
-    switchHeight,
-    switchDuration: token.motionDurationMid,
-    switchColor: token.colorPrimary,
-    switchDisabledOpacity: token.opacityLoading,
-    switchInnerMarginMin: switchPinSize / 2,
-    switchInnerMarginMax: switchPinSize + switchPadding + switchPadding * 2,
-    switchPadding,
-    switchPinSize,
-    switchBg: token.colorBgContainer,
-    switchMinWidthSM: switchPinSizeSM * 2 + switchPadding * 2,
-    switchHeightSM,
-    switchInnerMarginMinSM: switchPinSizeSM / 2,
-    switchInnerMarginMaxSM: switchPinSizeSM + switchPadding + switchPadding * 2,
-    switchPinSizeSM,
-    switchHandleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`,
-    switchLoadingIconSize: token.fontSizeIcon * 0.75,
-    switchLoadingIconColor: `rgba(0, 0, 0, ${token.opacityLoading})`,
-    switchHandleActiveInset: '-30%',
-  });
+    return [
+      genSwitchStyle(switchToken),

-  return [
-    genSwitchStyle(switchToken),
+      // inner style
+      genSwitchInnerStyle(switchToken),

-    // inner style
-    genSwitchInnerStyle(switchToken),
+      // handle style
+      genSwitchHandleStyle(switchToken),

-    // handle style
-    genSwitchHandleStyle(switchToken),
+      // loading style
+      genSwitchLoadingStyle(switchToken),

-    // loading style
-    genSwitchLoadingStyle(switchToken),
+      // small style
+      genSwitchSmallStyle(switchToken),
+    ];
+  },
+  (token) => {
+    const { fontSize, lineHeight, controlHeight, colorWhite } = token;

-    // small style
-    genSwitchSmallStyle(switchToken),
-  ];
-});
+    const height = fontSize * lineHeight;
+    const heightSM = controlHeight / 2;
+    const padding = 2; // Fixed value
+    const handleSize = height - padding * 2;
+    const handleSizeSM = heightSM - padding * 2;
+
+    return {
+      trackHeight: height,
+      trackHeightSM: heightSM,
+      trackMinWidth: handleSize * 2 + padding * 4,
+      trackMinWidthSM: handleSizeSM * 2 + padding * 2,
+      trackPadding: padding, // Fixed value
+      handleBg: colorWhite,
+      handleSize,
+      handleSizeSM,
+      handleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`,
+      innerMinMargin: handleSize / 2,
+      innerMaxMargin: handleSize + padding + padding * 2,
+      innerMinMarginSM: handleSizeSM / 2,
+      innerMaxMarginSM: handleSizeSM + padding + padding * 2,
+    };
+  },
+);
--- a/components/theme/interface/components.ts
+++ b/components/theme/interface/components.ts
@ -46,6 +46,7 @@ import type { ComponentToken as SpaceComponentToken } from '../../space/style';
 import type { ComponentToken as SpinComponentToken } from '../../spin/style';
 import type { ComponentToken as StatisticComponentToken } from '../../statistic/style';
 import type { ComponentToken as StepsComponentToken } from '../../steps/style';
+import type { ComponentToken as SwitchComponentToken } from '../../switch/style';
 import type { ComponentToken as TableComponentToken } from '../../table/style';
 import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
 import type { ComponentToken as TagComponentToken } from '../../tag/style';
@ -99,7 +100,7 @@ export interface ComponentTokenMap {
  Slider?: SliderComponentToken;
  Spin?: SpinComponentToken;
  Statistic?: StatisticComponentToken;
-  Switch?: {};
+  Switch?: SwitchComponentToken;
  Tag?: TagComponentToken;
  Tree?: {};
  TreeSelect?: {};
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@ -630,7 +630,24 @@ export default App;
 | `@steps-vertical-tail-width` | - | Deprecated |
 | `@steps-vertical-tail-width-sm` | - | Deprecated |

-<!-- ### Switch -->
+### Switch
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@switch-height` | `trackHeight` | - |
+| `@switch-sm-height` | `trackHeightSM` | - |
+| `@switch-min-width` | `trackMinWidth` | - |
+| `@switch-sm-min-width` | `trackMinWidthSM` | - |
+| `@switch-disabled-opacity` | `opacityLoading` | Global Token |
+| `@switch-color` | `colorPrimary` | Global Token |
+| `@switch-bg` | `handleBg` | - |
+| `@switch-shadow-color` | `handleShadow` | Control `box-shadow`, not only shadow color |
+| `@switch-padding` | `trackPadding` | - |
+| `@switch-inner-margin-min` | `innerMinMargin` | - |
+| `@switch-inner-margin-max` | `innerMaxMargin` | - |
+| `@switch-sm-inner-margin-min` | `innerMinMarginSM` | - |
+| `@switch-sm-inner-margin-max` | `innerMaxMarginSM` | - |

 ### Table

--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@ -628,7 +628,24 @@ Mentions 提及
 | `@steps-vertical-tail-width` | - | 已废弃 |
 | `@steps-vertical-tail-width-sm` | - | 已废弃 |

-<!-- ### Switch 开关 -->
+### Switch 开关
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@switch-height` | `trackHeight` | - |
+| `@switch-sm-height` | `trackHeightSM` | - |
+| `@switch-min-width` | `trackMinWidth` | - |
+| `@switch-sm-min-width` | `trackMinWidthSM` | - |
+| `@switch-disabled-opacity` | `opacityLoading` | 全局 Token |
+| `@switch-color` | `colorPrimary` | 全局 Token |
+| `@switch-bg` | `handleBg` | - |
+| `@switch-shadow-color` | `handleShadow` | 控制把手阴影，不仅是颜色 |
+| `@switch-padding` | `trackPadding` | - |
+| `@switch-inner-margin-min` | `innerMinMargin` | - |
+| `@switch-inner-margin-max` | `innerMaxMargin` | - |
+| `@switch-sm-inner-margin-min` | `innerMinMarginSM` | - |
+| `@switch-sm-inner-margin-max` | `innerMaxMarginSM` | - |

 ### Table 表格