feat: CP support Switch className and style (#43283)

components/config-provider/__tests__/style.test.tsx

@@ -25,6 +25,7 @@ import Slider from '../../slider';
 import Space from '../../space';
 import Spin from '../../spin';
 import Steps from '../../steps';
+import Switch from '../../switch';
 import Typography from '../../typography';
 
 describe('ConfigProvider support style and className props', () => {
@@ -593,4 +594,15 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-rate');
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
   });
+
+  it('Should Switch className & style works', () => {
+    const { container } = render(
+      <ConfigProvider switch={{ className: 'cp-switch', style: { backgroundColor: 'blue' } }}>
+        <Switch />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLButtonElement>('.ant-switch');
+    expect(element).toHaveClass('cp-switch');
+    expect(element).toHaveStyle({ backgroundColor: 'blue' });
+  });
 });

components/config-provider/context.ts

@@ -115,6 +115,7 @@ export interface ConfigConsumerProps {
   badge?: BadgeConfig;
   radio?: ComponentStyleConfig;
   rate?: ComponentStyleConfig;
+  switch?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

components/config-provider/index.en-US.md

@@ -123,6 +123,7 @@ const {
 | segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
 | slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -159,6 +159,7 @@ export interface ConfigProviderProps {
   badge?: BadgeConfig;
   radio?: ComponentStyleConfig;
   rate?: ComponentStyleConfig;
+  switch?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -270,6 +271,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     badge,
     radio,
     rate,
+    switch: SWITCH,
   } = props;
 
   // =================================== Warning ===================================
@@ -343,6 +345,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     badge,
     radio,
     rate,
+    switch: SWITCH,
   };
 
   const config = {

components/config-provider/index.zh-CN.md

@@ -125,6 +125,7 @@ const {
 | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
 | slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/switch/index.tsx

@@ -43,70 +43,74 @@ type CompoundedComponent = React.ForwardRefExoticComponent<
   __ANT_SWITCH: boolean;
 };
 
-const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
-  (
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    size: customizeSize,
+    disabled: customDisabled,
+    loading,
+    className,
+    rootClassName,
+    style,
+    ...restProps
+  } = props;
+
+  warning(
+    'checked' in props || !('value' in props),
+    'Switch',
+    '`value` is not a valid prop, do you mean `checked`?',
+  );
+
+  const { getPrefixCls, direction, switch: SWITCH } = React.useContext(ConfigContext);
+
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = (customDisabled ?? disabled) || loading;
+
+  const prefixCls = getPrefixCls('switch', customizePrefixCls);
+
+  const loadingIcon = (
+    <div className={`${prefixCls}-handle`}>
+      {loading && <LoadingOutlined className={`${prefixCls}-loading-icon`} />}
+    </div>
+  );
+
+  // Style
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
+  const mergedSize = useSize(customizeSize);
+
+  const classes = classNames(
+    SWITCH?.className,
     {
-      prefixCls: customizePrefixCls,
-      size: customizeSize,
-      disabled: customDisabled,
-      loading,
-      className,
-      rootClassName,
-      ...props
+      [`${prefixCls}-small`]: mergedSize === 'small',
+      [`${prefixCls}-loading`]: loading,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
     },
-    ref,
-  ) => {
-    warning(
-      'checked' in props || !('value' in props),
-      'Switch',
-      '`value` is not a valid prop, do you mean `checked`?',
-    );
-
-    const { getPrefixCls, direction } = React.useContext(ConfigContext);
-
-    // ===================== Disabled =====================
-    const disabled = React.useContext(DisabledContext);
-    const mergedDisabled = (customDisabled ?? disabled) || loading;
-
-    const prefixCls = getPrefixCls('switch', customizePrefixCls);
-    const loadingIcon = (
-      <div className={`${prefixCls}-handle`}>
-        {loading && <LoadingOutlined className={`${prefixCls}-loading-icon`} />}
-      </div>
-    );
-
-    // Style
-    const [wrapSSR, hashId] = useStyle(prefixCls);
-
-    const mergedSize = useSize(customizeSize);
-
-    const classes = classNames(
-      {
-        [`${prefixCls}-small`]: mergedSize === 'small',
-        [`${prefixCls}-loading`]: loading,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      },
-      className,
-      rootClassName,
-      hashId,
-    );
-
-    return wrapSSR(
-      <Wave>
-        <RcSwitch
-          {...props}
-          prefixCls={prefixCls}
-          className={classes}
-          disabled={mergedDisabled}
-          ref={ref}
-          loadingIcon={loadingIcon}
-        />
-      </Wave>,
-    );
-  },
-) as CompoundedComponent;
+    className,
+    rootClassName,
+    hashId,
+  );
+
+  const mergedStyle: React.CSSProperties = { ...SWITCH?.style, ...style };
+
+  return wrapSSR(
+    <Wave>
+      <RcSwitch
+        {...restProps}
+        prefixCls={prefixCls}
+        className={classes}
+        style={mergedStyle}
+        disabled={mergedDisabled}
+        ref={ref}
+        loadingIcon={loadingIcon}
+      />
+    </Wave>,
+  );
+}) as CompoundedComponent;
 
 Switch.__ANT_SWITCH = true;
+
 if (process.env.NODE_ENV !== 'production') {
   Switch.displayName = 'Switch';
 }