style: 💄 className prop ordering #26594 (#26602)

close #26594

components/anchor/Anchor.tsx

@@ -286,9 +286,13 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
       visible: activeLink,
     });
 
-    const wrapperClass = classNames(className, `${prefixCls}-wrapper`, {
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-    });
+    const wrapperClass = classNames(
+      `${prefixCls}-wrapper`,
+      {
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
 
     const anchorClass = classNames(prefixCls, {
       fixed: !affix && !showInkInFixed,

components/anchor/AnchorLink.tsx

@@ -51,9 +51,13 @@ class AnchorLink extends React.Component<AnchorLinkProps, any, AntAnchor> {
     const { prefixCls: customizePrefixCls, href, title, children, className, target } = this.props;
     const prefixCls = getPrefixCls('anchor', customizePrefixCls);
     const active = this.context.activeLink === href;
-    const wrapperClassName = classNames(className, `${prefixCls}-link`, {
-      [`${prefixCls}-link-active`]: active,
-    });
+    const wrapperClassName = classNames(
+      `${prefixCls}-link`,
+      {
+        [`${prefixCls}-link-active`]: active,
+      },
+      className,
+    );
     const titleClassName = classNames(`${prefixCls}-link-title`, {
       [`${prefixCls}-link-title-active`]: active,
     });

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -79,7 +79,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
       class="ant-select-selection-search"
     >
       <span
-        class="ant-input-search ant-select-selection-search-input ant-input-affix-wrapper ant-input-affix-wrapper-lg"
+        class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-select-selection-search-input"
       >
         <input
           aria-activedescendant="undefined_list_0"
@@ -448,7 +448,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                 class="ant-select-selection-search"
               >
                 <span
-                  class="ant-select-selection-search-input ant-input-affix-wrapper"
+                  class="ant-input-affix-wrapper ant-select-selection-search-input"
                 >
                   <input
                     aria-activedescendant="undefined_list_0"
@@ -590,7 +590,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                   class="ant-select-selection-search"
                 >
                   <span
-                    class="ant-select-selection-search-input ant-input-affix-wrapper"
+                    class="ant-input-affix-wrapper ant-select-selection-search-input"
                   >
                     <input
                       aria-activedescendant="undefined_list_0"
@@ -733,7 +733,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                   class="ant-select-selection-search"
                 >
                   <span
-                    class="ant-input-search ant-select-selection-search-input ant-input-affix-wrapper"
+                    class="ant-input-affix-wrapper ant-input-search ant-select-selection-search-input"
                   >
                     <input
                       aria-activedescendant="undefined_list_0"
@@ -877,7 +877,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                   class="ant-select-selection-search"
                 >
                   <span
-                    class="ant-input-search ant-select-selection-search-input ant-input-affix-wrapper"
+                    class="ant-input-affix-wrapper ant-input-search ant-select-selection-search-input"
                   >
                     <input
                       aria-activedescendant="undefined_list_0"
@@ -1037,7 +1037,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
       class="ant-select-selection-search"
     >
       <span
-        class="ant-input-search ant-select-selection-search-input ant-input-search-enter-button ant-input-search-large ant-input-group-wrapper ant-input-group-wrapper-lg"
+        class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large ant-select-selection-search-input"
       >
         <span
           class="ant-input-wrapper ant-input-group"
@@ -1059,7 +1059,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
             class="ant-input-group-addon"
           >
             <button
-              class="ant-btn ant-input-search-button ant-btn-primary ant-btn-lg"
+              class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button"
               type="button"
             >
               <span

components/auto-complete/__tests__/__snapshots__/index.test.js.snap

@@ -89,7 +89,7 @@ exports[`AutoComplete legacy dataSource should accept react element option 1`] =
 
 exports[`AutoComplete rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-select ant-select-auto-complete ant-select-rtl ant-select-single ant-select-show-search"
+  class="ant-select ant-select-rtl ant-select-auto-complete ant-select-single ant-select-show-search"
 >
   <div
     class="ant-select-selector"

components/auto-complete/index.tsx

@@ -117,7 +117,7 @@ const AutoComplete: React.ForwardRefRenderFunction<Select, AutoCompleteProps> =
             ref={selectRef as any}
             {...omit(props, ['dataSource'])}
             prefixCls={prefixCls}
-            className={classNames(className, `${prefixCls}-auto-complete`)}
+            className={classNames(`${prefixCls}-auto-complete`, className)}
             mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as any}
             getInputElement={getInputElement}
           >

components/avatar/avatar.tsx

@@ -107,11 +107,16 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
     [`${prefixCls}-sm`]: size === 'small',
   });
 
-  const classString = classNames(prefixCls, className, sizeCls, {
-    [`${prefixCls}-${shape}`]: shape,
-    [`${prefixCls}-image`]: src && isImgExist,
-    [`${prefixCls}-icon`]: icon,
-  });
+  const classString = classNames(
+    prefixCls,
+    sizeCls,
+    {
+      [`${prefixCls}-${shape}`]: shape,
+      [`${prefixCls}-image`]: src && isImgExist,
+      [`${prefixCls}-icon`]: icon,
+    },
+    className,
+  );
 
   const sizeStyle: React.CSSProperties =
     typeof size === 'number'

components/back-top/index.tsx

@@ -98,9 +98,13 @@ const BackTop: React.FC<BackTopProps> = props => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const { prefixCls: customizePrefixCls, className = '' } = props;
   const prefixCls = getPrefixCls('back-top', customizePrefixCls);
-  const classString = classNames(prefixCls, className, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const classString = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   // fix https://fb.me/react-unknown-prop
   const divProps = omit(props, [

components/badge/Ribbon.tsx

@@ -29,10 +29,15 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
   const colorInPreset = isPresetColor(color);
-  const ribbonCls = classNames(prefixCls, className, `${prefixCls}-placement-${placement}`, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-    [`${prefixCls}-color-${color}`]: colorInPreset,
-  });
+  const ribbonCls = classNames(
+    prefixCls,
+    `${prefixCls}-placement-${placement}`,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+      [`${prefixCls}-color-${color}`]: colorInPreset,
+    },
+    className,
+  );
   const colorStyle: React.CSSProperties = {};
   const cornerColorStyle: React.CSSProperties = {};
   if (color && !colorInPreset) {

components/badge/__tests__/__snapshots__/demo.test.js.snap

@@ -1318,7 +1318,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     </sup>
   </span>
   <span
-    class="site-badge-count-4 ant-badge ant-badge-not-a-wrapper"
+    class="ant-badge ant-badge-not-a-wrapper site-badge-count-4"
   >
     <sup
       class="ant-scroll-number ant-badge-count"
@@ -1483,7 +1483,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     </sup>
   </span>
   <span
-    class="site-badge-count-109 ant-badge ant-badge-not-a-wrapper"
+    class="ant-badge ant-badge-not-a-wrapper site-badge-count-109"
   >
     <sup
       class="ant-scroll-number ant-badge-count ant-badge-multiple-words"

components/badge/index.tsx

@@ -62,7 +62,8 @@ const Badge: CompoundedComponent = ({
     return displayCount as string | number | null;
   };
 
-  const hasStatus = (): boolean => (status !== null && status !== undefined) || (color !== null && color !== undefined);
+  const hasStatus = (): boolean =>
+    (status !== null && status !== undefined) || (color !== null && color !== undefined);
 
   const isZero = () => {
     const numberedDisplayCount = getNumberedDisplayCount();
@@ -177,11 +178,15 @@ const Badge: CompoundedComponent = ({
     statusStyle.background = color;
   }
 
-  const badgeClassName = classNames(className, prefixCls, {
-    [`${prefixCls}-status`]: hasStatus(),
-    [`${prefixCls}-not-a-wrapper`]: !children,
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const badgeClassName = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-status`]: hasStatus(),
+      [`${prefixCls}-not-a-wrapper`]: !children,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   // <Badge status="success" />
   if (!children && hasStatus()) {

components/breadcrumb/Breadcrumb.tsx

@@ -135,9 +135,13 @@ const Breadcrumb: BreadcrumbInterface = ({
     });
   }
 
-  const breadcrumbClassName = classNames(className, prefixCls, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const breadcrumbClassName = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   return (
     <div className={breadcrumbClassName} style={style} {...restProps}>

components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap

@@ -116,7 +116,7 @@ exports[`Breadcrumb should render a menu 1`] = `
   </span>
   <span>
     <span
-      class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
+      class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
     >
       <span
         class="ant-breadcrumb-link"

components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap

@@ -97,7 +97,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
   </span>
   <span>
     <span
-      class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
+      class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
     >
       <span
         class="ant-breadcrumb-link"

components/button/button.tsx

@@ -233,18 +233,22 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
 
   const iconType = innerLoading ? 'loading' : icon;
 
-  const classes = classNames(prefixCls, className, {
-    [`${prefixCls}-${type}`]: type,
-    [`${prefixCls}-${shape}`]: shape,
-    [`${prefixCls}-${sizeCls}`]: sizeCls,
-    [`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
-    [`${prefixCls}-background-ghost`]: ghost && !isUnborderedButtonType(type),
-    [`${prefixCls}-loading`]: innerLoading,
-    [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
-    [`${prefixCls}-block`]: block,
-    [`${prefixCls}-dangerous`]: !!danger,
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const classes = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-${type}`]: type,
+      [`${prefixCls}-${shape}`]: shape,
+      [`${prefixCls}-${sizeCls}`]: sizeCls,
+      [`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
+      [`${prefixCls}-background-ghost`]: ghost && !isUnborderedButtonType(type),
+      [`${prefixCls}-loading`]: innerLoading,
+      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
+      [`${prefixCls}-block`]: block,
+      [`${prefixCls}-dangerous`]: !!danger,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   const iconNode =
     icon && !innerLoading ? (

components/calendar/__tests__/__snapshots__/demo.test.js.snap

@@ -955,7 +955,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
       class="ant-picker-calendar-header"
     >
       <div
-        class="ant-select ant-picker-calendar-year-select ant-select-sm ant-select-single ant-select-show-arrow"
+        class="ant-select ant-select-sm ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
       >
         <div
           class="ant-select-selector"
@@ -1015,7 +1015,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
         </span>
       </div>
       <div
-        class="ant-select ant-picker-calendar-month-select ant-select-sm ant-select-single ant-select-show-arrow"
+        class="ant-select ant-select-sm ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
       >
         <div
           class="ant-select-selector"
@@ -1964,7 +1964,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
           style="padding-left:4px;padding-right:4px"
         >
           <div
-            class="ant-select my-year-select ant-select-sm ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-sm my-year-select ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -954,7 +954,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
     class="ant-picker-calendar-header"
   >
     <div
-      class="ant-select ant-picker-calendar-year-select ant-select-rtl ant-select-single ant-select-show-arrow"
+      class="ant-select ant-select-rtl ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
     >
       <div
         class="ant-select-selector"
@@ -1014,7 +1014,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
       </span>
     </div>
     <div
-      class="ant-select ant-picker-calendar-month-select ant-select-rtl ant-select-single ant-select-show-arrow"
+      class="ant-select ant-select-rtl ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
     >
       <div
         class="ant-select-selector"

components/calendar/generateCalendar.tsx

@@ -241,11 +241,15 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
         {(mergedLocale: any) => {
           return (
             <div
-              className={classNames(calendarPrefixCls, className, {
-                [`${calendarPrefixCls}-full`]: fullscreen,
-                [`${calendarPrefixCls}-mini`]: !fullscreen,
-                [`${calendarPrefixCls}-rtl`]: direction === 'rtl',
-              })}
+              className={classNames(
+                calendarPrefixCls,
+                {
+                  [`${calendarPrefixCls}-full`]: fullscreen,
+                  [`${calendarPrefixCls}-mini`]: !fullscreen,
+                  [`${calendarPrefixCls}-rtl`]: direction === 'rtl',
+                },
+                className,
+              )}
               style={style}
             >
               {headerRender ? (

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -839,7 +839,7 @@ Array [
         </div>
       </div>
       <div
-        class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large"
+        class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
           class="ant-tabs-nav"
@@ -962,7 +962,7 @@ Array [
         class="ant-card-head-wrapper"
       />
       <div
-        class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large"
+        class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
           class="ant-tabs-nav"

components/card/index.tsx

@@ -183,16 +183,20 @@ const Card: CardInterface = props => {
     ) : null;
   const divProps = omit(others, ['onTabChange']);
   const mergedSize = customizeSize || size;
-  const classString = classNames(prefixCls, className, {
-    [`${prefixCls}-loading`]: loading,
-    [`${prefixCls}-bordered`]: bordered,
-    [`${prefixCls}-hoverable`]: hoverable,
-    [`${prefixCls}-contain-grid`]: isContainGrid(),
-    [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
-    [`${prefixCls}-${mergedSize}`]: mergedSize,
-    [`${prefixCls}-type-${type}`]: !!type,
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const classString = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-loading`]: loading,
+      [`${prefixCls}-bordered`]: bordered,
+      [`${prefixCls}-hoverable`]: hoverable,
+      [`${prefixCls}-contain-grid`]: isContainGrid(),
+      [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
+      [`${prefixCls}-${mergedSize}`]: mergedSize,
+      [`${prefixCls}-type-${type}`]: !!type,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   return (
     <div {...divProps} className={classString}>

components/cascader/index.tsx

@@ -515,15 +515,19 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
           [`${prefixCls}-picker-arrow`]: true,
           [`${prefixCls}-picker-arrow-expand`]: state.popupVisible,
         });
-        const pickerCls = classNames(className, `${prefixCls}-picker`, {
-          [`${prefixCls}-picker-rtl`]: isRtlLayout,
-          [`${prefixCls}-picker-with-value`]: state.inputValue,
-          [`${prefixCls}-picker-disabled`]: disabled,
-          [`${prefixCls}-picker-${mergedSize}`]: !!mergedSize,
-          [`${prefixCls}-picker-show-search`]: !!showSearch,
-          [`${prefixCls}-picker-focused`]: inputFocused,
-          [`${prefixCls}-picker-borderless`]: !bordered,
-        });
+        const pickerCls = classNames(
+          `${prefixCls}-picker`,
+          {
+            [`${prefixCls}-picker-rtl`]: isRtlLayout,
+            [`${prefixCls}-picker-with-value`]: state.inputValue,
+            [`${prefixCls}-picker-disabled`]: disabled,
+            [`${prefixCls}-picker-${mergedSize}`]: !!mergedSize,
+            [`${prefixCls}-picker-show-search`]: !!showSearch,
+            [`${prefixCls}-picker-focused`]: inputFocused,
+            [`${prefixCls}-picker-borderless`]: !bordered,
+          },
+          className,
+        );
 
         // Fix bug of https://github.com/facebook/react/pull/5004
         // and https://fb.me/react-unknown-prop

components/checkbox/Checkbox.tsx

@@ -119,12 +119,15 @@ class Checkbox extends React.PureComponent<CheckboxProps, {}> {
       checkboxProps.checked = checkboxGroup.value.indexOf(props.value) !== -1;
       checkboxProps.disabled = props.disabled || checkboxGroup.disabled;
     }
-    const classString = classNames(className, {
-      [`${prefixCls}-wrapper`]: true,
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-      [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
-      [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
-    });
+    const classString = classNames(
+      {
+        [`${prefixCls}-wrapper`]: true,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
+        [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
+      },
+      className,
+    );
     const checkboxClass = classNames({
       [`${prefixCls}-indeterminate`]: indeterminate,
     });

components/checkbox/Group.tsx

@@ -154,9 +154,13 @@ class CheckboxGroup extends React.PureComponent<CheckboxGroupProps, CheckboxGrou
       cancelValue: this.cancelValue,
     };
 
-    const classString = classNames(groupPrefixCls, className, {
-      [`${groupPrefixCls}-rtl`]: direction === 'rtl',
-    });
+    const classString = classNames(
+      groupPrefixCls,
+      {
+        [`${groupPrefixCls}-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
     return (
       <div className={classString} style={style} {...domProps}>
         <GroupContext.Provider value={context}>{children}</GroupContext.Provider>

components/checkbox/__tests__/__snapshots__/demo.test.js.snap

@@ -50,7 +50,7 @@ Array [
     class="ant-checkbox-group"
   >
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox ant-checkbox-checked"
@@ -70,7 +70,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper"
+      class="ant-checkbox-wrapper ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox"
@@ -89,7 +89,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox ant-checkbox-checked"
@@ -204,7 +204,7 @@ Array [
     class="ant-checkbox-group"
   >
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox ant-checkbox-checked"
@@ -224,7 +224,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper"
+      class="ant-checkbox-wrapper ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox"
@@ -243,7 +243,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper"
+      class="ant-checkbox-wrapper ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox"
@@ -268,7 +268,7 @@ Array [
     class="ant-checkbox-group"
   >
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper"
+      class="ant-checkbox-wrapper ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox"
@@ -287,7 +287,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox ant-checkbox-checked"
@@ -307,7 +307,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper"
+      class="ant-checkbox-wrapper ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox"
@@ -332,7 +332,7 @@ Array [
     class="ant-checkbox-group"
   >
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
@@ -353,7 +353,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox ant-checkbox-disabled"
@@ -373,7 +373,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox ant-checkbox-disabled"

components/checkbox/__tests__/__snapshots__/group.test.js.snap

@@ -5,7 +5,7 @@ exports[`CheckboxGroup passes prefixCls down to checkbox 1`] = `
   class="my-checkbox-group"
 >
   <label
-    class="my-checkbox-group-item my-checkbox-wrapper"
+    class="my-checkbox-wrapper my-checkbox-group-item"
   >
     <span
       class="my-checkbox"
@@ -24,7 +24,7 @@ exports[`CheckboxGroup passes prefixCls down to checkbox 1`] = `
     </span>
   </label>
   <label
-    class="my-checkbox-group-item my-checkbox-wrapper"
+    class="my-checkbox-wrapper my-checkbox-group-item"
     style="font-size:12px"
   >
     <span

components/comment/__tests__/__snapshots__/demo.test.js.snap

@@ -196,7 +196,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
 
 exports[`renders ./components/comment/demo/list.md correctly 1`] = `
 <div
-  class="ant-list comment-list ant-list-split"
+  class="ant-list ant-list-split comment-list"
 >
   <div
     class="ant-list-header"

components/comment/index.tsx

@@ -72,9 +72,13 @@ const Comment: React.FC<CommentProps> = ({
     </div>
   );
 
-  const cls = classNames(prefixCls, className, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const cls = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   return (
     <div {...otherProps} className={cls}>

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -350,7 +350,7 @@ exports[`ConfigProvider components AutoComplete configProvider 1`] = `
 
 exports[`ConfigProvider components AutoComplete configProvider componentSize large 1`] = `
 <div
-  class="config-select config-select-auto-complete config-select-lg config-select-single config-select-show-search"
+  class="config-select config-select-lg config-select-auto-complete config-select-single config-select-show-search"
 >
   <div
     class="config-select-selector"
@@ -3547,7 +3547,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
       class="config-picker-calendar-header"
     >
       <div
-        class="config-select config-picker-calendar-year-select config-select-lg config-select-single config-select-show-arrow"
+        class="config-select config-select-lg config-picker-calendar-year-select config-select-single config-select-show-arrow"
       >
         <div
           class="config-select-selector"
@@ -3607,7 +3607,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
         </span>
       </div>
       <div
-        class="config-select config-picker-calendar-month-select config-select-lg config-select-single config-select-show-arrow"
+        class="config-select config-select-lg config-picker-calendar-month-select config-select-single config-select-show-arrow"
       >
         <div
           class="config-select-selector"
@@ -4488,7 +4488,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
       class="config-picker-calendar-header"
     >
       <div
-        class="config-select config-picker-calendar-year-select config-select-lg config-select-single config-select-show-arrow"
+        class="config-select config-select-lg config-picker-calendar-year-select config-select-single config-select-show-arrow"
       >
         <div
           class="config-select-selector"
@@ -13489,7 +13489,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
     </span>
   </button>
   <button
-    class="config-btn config-dropdown-trigger config-btn-default config-btn-icon-only"
+    class="config-btn config-btn-default config-btn-icon-only config-dropdown-trigger"
     type="button"
   >
     <span
@@ -13529,7 +13529,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
     </span>
   </button>
   <button
-    class="config-btn config-dropdown-trigger config-btn-default config-btn-lg config-btn-icon-only"
+    class="config-btn config-btn-default config-btn-lg config-btn-icon-only config-dropdown-trigger"
     type="button"
   >
     <span
@@ -13569,7 +13569,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
     </span>
   </button>
   <button
-    class="config-btn config-dropdown-trigger config-btn-default config-btn-icon-only"
+    class="config-btn config-btn-default config-btn-icon-only config-dropdown-trigger"
     type="button"
   >
     <span
@@ -13609,7 +13609,7 @@ exports[`ConfigProvider components Dropdown configProvider virtual and dropdownM
     </span>
   </button>
   <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
     type="button"
   >
     <span
@@ -13649,7 +13649,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
     type="button"
   >
     <span
@@ -13689,7 +13689,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
     type="button"
   >
     <span
@@ -14459,7 +14459,7 @@ exports[`ConfigProvider components Input configProvider 1`] = `
       value=""
     />
     <span
-      class="config-input-search config-input-affix-wrapper"
+      class="config-input-affix-wrapper config-input-search"
     >
       <input
         class="config-input"
@@ -14494,7 +14494,7 @@ exports[`ConfigProvider components Input configProvider 1`] = `
     </span>
   </span>
   <span
-    class="config-input-password config-input-affix-wrapper"
+    class="config-input-affix-wrapper config-input-password"
   >
     <input
       action="click"
@@ -14548,7 +14548,7 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
       value=""
     />
     <span
-      class="config-input-search config-input-affix-wrapper config-input-affix-wrapper-lg"
+      class="config-input-affix-wrapper config-input-affix-wrapper-lg config-input-search"
     >
       <input
         class="config-input config-input-lg"
@@ -14583,7 +14583,7 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
     </span>
   </span>
   <span
-    class="config-input-password config-input-affix-wrapper config-input-affix-wrapper-lg"
+    class="config-input-affix-wrapper config-input-affix-wrapper-lg config-input-password"
   >
     <input
       action="click"
@@ -14637,7 +14637,7 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
       value=""
     />
     <span
-      class="config-input-search config-input-affix-wrapper"
+      class="config-input-affix-wrapper config-input-search"
     >
       <input
         class="config-input"
@@ -14672,7 +14672,7 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
     </span>
   </span>
   <span
-    class="config-input-password config-input-affix-wrapper"
+    class="config-input-affix-wrapper config-input-password"
   >
     <input
       action="click"
@@ -14726,7 +14726,7 @@ exports[`ConfigProvider components Input configProvider virtual and dropdownMatc
       value=""
     />
     <span
-      class="ant-input-search ant-input-affix-wrapper"
+      class="ant-input-affix-wrapper ant-input-search"
     >
       <input
         class="ant-input"
@@ -14761,7 +14761,7 @@ exports[`ConfigProvider components Input configProvider virtual and dropdownMatc
     </span>
   </span>
   <span
-    class="ant-input-password ant-input-affix-wrapper"
+    class="ant-input-affix-wrapper ant-input-password"
   >
     <input
       action="click"
@@ -14815,7 +14815,7 @@ exports[`ConfigProvider components Input normal 1`] = `
       value=""
     />
     <span
-      class="ant-input-search ant-input-affix-wrapper"
+      class="ant-input-affix-wrapper ant-input-search"
     >
       <input
         class="ant-input"
@@ -14850,7 +14850,7 @@ exports[`ConfigProvider components Input normal 1`] = `
     </span>
   </span>
   <span
-    class="ant-input-password ant-input-affix-wrapper"
+    class="ant-input-affix-wrapper ant-input-password"
   >
     <input
       action="click"
@@ -14904,7 +14904,7 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
       value=""
     />
     <span
-      class="prefix-Input ant-input-affix-wrapper"
+      class="ant-input-affix-wrapper prefix-Input"
     >
       <input
         class="ant-input"
@@ -14939,7 +14939,7 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
     </span>
   </span>
   <span
-    class="prefix-Input ant-input-affix-wrapper"
+    class="ant-input-affix-wrapper prefix-Input"
   >
     <input
       action="click"
@@ -17204,7 +17204,7 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
       class="config-pagination-options"
     >
       <div
-        class="config-select config-pagination-options-size-changer config-select-sm config-select-single config-select-show-arrow"
+        class="config-select config-select-sm config-pagination-options-size-changer config-select-single config-select-show-arrow"
       >
         <div
           class="config-select-selector"
@@ -17364,7 +17364,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
       class="config-pagination-options"
     >
       <div
-        class="config-select config-pagination-options-size-changer config-select-lg config-select-single config-select-show-arrow"
+        class="config-select config-select-lg config-pagination-options-size-changer config-select-single config-select-show-arrow"
       >
         <div
           class="config-select-selector"
@@ -17519,7 +17519,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
       class="config-pagination-options"
     >
       <div
-        class="config-select config-pagination-options-size-changer config-select-sm config-select-single config-select-show-arrow"
+        class="config-select config-select-sm config-pagination-options-size-changer config-select-single config-select-show-arrow"
       >
         <div
           class="config-select-selector"
@@ -17834,7 +17834,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
       class="config-pagination-options"
     >
       <div
-        class="config-select config-pagination-options-size-changer config-select-sm config-select-single config-select-show-arrow"
+        class="config-select config-select-sm config-pagination-options-size-changer config-select-single config-select-show-arrow"
       >
         <div
           class="config-select-selector"
@@ -18149,7 +18149,7 @@ exports[`ConfigProvider components Pagination configProvider virtual and dropdow
       class="ant-pagination-options"
     >
       <div
-        class="ant-select ant-pagination-options-size-changer ant-select-sm ant-select-single ant-select-show-arrow"
+        class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
       >
         <div
           class="ant-select-selector"
@@ -18464,7 +18464,7 @@ exports[`ConfigProvider components Pagination normal 1`] = `
       class="ant-pagination-options"
     >
       <div
-        class="ant-select ant-pagination-options-size-changer ant-select-sm ant-select-single ant-select-show-arrow"
+        class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
       >
         <div
           class="ant-select-selector"
@@ -18779,7 +18779,7 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
       class="prefix-Pagination-options"
     >
       <div
-        class="ant-select prefix-Pagination-options-size-changer ant-select-sm ant-select-single ant-select-show-arrow"
+        class="ant-select ant-select-sm prefix-Pagination-options-size-changer ant-select-single ant-select-show-arrow"
       >
         <div
           class="ant-select-selector"
@@ -23836,7 +23836,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
                         class="config-table-filter-trigger-container config-table-filter-trigger-container-open"
                       >
                         <span
-                          class="config-table-filter-trigger config-dropdown-trigger"
+                          class="config-dropdown-trigger config-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -24110,7 +24110,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
                         class="config-table-filter-trigger-container config-table-filter-trigger-container-open"
                       >
                         <span
-                          class="config-table-filter-trigger config-dropdown-trigger"
+                          class="config-dropdown-trigger config-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -24384,7 +24384,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
                         class="config-table-filter-trigger-container config-table-filter-trigger-container-open"
                       >
                         <span
-                          class="config-table-filter-trigger config-dropdown-trigger"
+                          class="config-dropdown-trigger config-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -24658,7 +24658,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
                         class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -24932,7 +24932,7 @@ exports[`ConfigProvider components Table normal 1`] = `
                         class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -25206,7 +25206,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
                         class="prefix-Table-filter-trigger-container prefix-Table-filter-trigger-container-open"
                       >
                         <span
-                          class="prefix-Table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger prefix-Table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -36481,7 +36481,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
     </div>
   </div>
   <div
-    class="config-tree config-tree-directory config-tree-block-node"
+    class="config-tree config-tree-block-node config-tree-directory"
   >
     <div
       role="tree"
@@ -36602,7 +36602,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
     </div>
   </div>
   <div
-    class="config-tree config-tree-directory config-tree-block-node"
+    class="config-tree config-tree-block-node config-tree-directory"
   >
     <div
       role="tree"
@@ -36723,7 +36723,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
     </div>
   </div>
   <div
-    class="config-tree config-tree-directory config-tree-block-node"
+    class="config-tree config-tree-block-node config-tree-directory"
   >
     <div
       role="tree"
@@ -36844,7 +36844,7 @@ exports[`ConfigProvider components Tree configProvider virtual and dropdownMatch
     </div>
   </div>
   <div
-    class="ant-tree ant-tree-directory ant-tree-block-node"
+    class="ant-tree ant-tree-block-node ant-tree-directory"
   >
     <div
       role="tree"
@@ -36965,7 +36965,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
     </div>
   </div>
   <div
-    class="ant-tree ant-tree-directory ant-tree-block-node"
+    class="ant-tree ant-tree-block-node ant-tree-directory"
   >
     <div
       role="tree"
@@ -37086,7 +37086,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
     </div>
   </div>
   <div
-    class="prefix-Tree prefix-Tree-directory prefix-Tree-block-node"
+    class="prefix-Tree prefix-Tree-block-node prefix-Tree-directory"
   >
     <div
       role="tree"
@@ -37940,7 +37940,7 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
                 class="config-upload-list-item-card-actions "
               >
                 <button
-                  class="config-btn config-upload-list-item-card-actions-btn config-btn-text config-btn-sm config-btn-icon-only"
+                  class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -38044,7 +38044,7 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
                 class="config-upload-list-item-card-actions "
               >
                 <button
-                  class="config-btn config-upload-list-item-card-actions-btn config-btn-text config-btn-sm config-btn-icon-only"
+                  class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -38148,7 +38148,7 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
                 class="config-upload-list-item-card-actions "
               >
                 <button
-                  class="config-btn config-upload-list-item-card-actions-btn config-btn-text config-btn-sm config-btn-icon-only"
+                  class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -38252,7 +38252,7 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
                 class="ant-upload-list-item-card-actions "
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -38356,7 +38356,7 @@ exports[`ConfigProvider components Upload normal 1`] = `
                 class="ant-upload-list-item-card-actions "
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -38460,7 +38460,7 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
                 class="ant-upload-list-item-card-actions "
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -90,10 +90,13 @@ export default function generateRangePicker<DateType>(
                 transitionName="slide-up"
                 {...restProps}
                 {...additionalOverrideProps}
-                className={classNames(className, {
-                  [`${prefixCls}-${mergedSize}`]: mergedSize,
-                  [`${prefixCls}-borderless`]: !bordered,
-                })}
+                className={classNames(
+                  {
+                    [`${prefixCls}-${mergedSize}`]: mergedSize,
+                    [`${prefixCls}-borderless`]: !bordered,
+                  },
+                  className,
+                )}
                 locale={locale!.lang}
                 prefixCls={prefixCls}
                 getPopupContainer={customGetPopupContainer || getPopupContainer}

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -122,10 +122,13 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                   {...restProps}
                   {...additionalOverrideProps}
                   locale={locale!.lang}
-                  className={classNames(className, {
-                    [`${prefixCls}-${mergedSize}`]: mergedSize,
-                    [`${prefixCls}-borderless`]: !bordered,
-                  })}
+                  className={classNames(
+                    {
+                      [`${prefixCls}-${mergedSize}`]: mergedSize,
+                      [`${prefixCls}-borderless`]: !bordered,
+                    },
+                    className,
+                  )}
                   prefixCls={prefixCls}
                   getPopupContainer={customizeGetPopupContainer || getPopupContainer}
                   generateConfig={generateConfig}

components/descriptions/index.tsx

@@ -143,11 +143,15 @@ function Descriptions({
 
   return (
     <div
-      className={classNames(prefixCls, className, {
-        [`${prefixCls}-${size}`]: size && size !== 'default',
-        [`${prefixCls}-bordered`]: !!bordered,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      })}
+      className={classNames(
+        prefixCls,
+        {
+          [`${prefixCls}-${size}`]: size && size !== 'default',
+          [`${prefixCls}-bordered`]: !!bordered,
+          [`${prefixCls}-rtl`]: direction === 'rtl',
+        },
+        className,
+      )}
       style={style}
     >
       {(title || extra) && (

components/divider/index.tsx

@@ -29,13 +29,18 @@ const Divider: React.FC<DividerProps> = props => (
       const prefixCls = getPrefixCls('divider', customizePrefixCls);
       const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
       const hasChildren = !!children;
-      const classString = classNames(className, prefixCls, `${prefixCls}-${type}`, {
-        [`${prefixCls}-with-text`]: hasChildren,
-        [`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
-        [`${prefixCls}-dashed`]: !!dashed,
-        [`${prefixCls}-plain`]: !!plain,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      });
+      const classString = classNames(
+        prefixCls,
+        `${prefixCls}-${type}`,
+        {
+          [`${prefixCls}-with-text`]: hasChildren,
+          [`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
+          [`${prefixCls}-dashed`]: !!dashed,
+          [`${prefixCls}-plain`]: !!plain,
+          [`${prefixCls}-rtl`]: direction === 'rtl',
+        },
+        className,
+      );
       return (
         <div className={classString} {...restProps} role="separator">
           {children && <span className={`${prefixCls}-inner-text`}>{children}</span>}

components/drawer/index.tsx

@@ -289,10 +289,13 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
           } = this.props;
 
           const prefixCls = getPrefixCls('select', customizePrefixCls);
-          const drawerClassName = classNames(className, {
-            'no-mask': !mask,
-            [`${prefixCls}-rtl`]: direction === 'rtl',
-          });
+          const drawerClassName = classNames(
+            {
+              'no-mask': !mask,
+              [`${prefixCls}-rtl`]: direction === 'rtl',
+            },
+            className,
+          );
           const offsetStyle = mask ? this.getOffsetStyle() : {};
 
           return (

components/dropdown/__tests__/__snapshots__/demo.test.js.snap

@@ -56,7 +56,7 @@ Array [
 
 exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
 <a
-  class="ant-dropdown-link ant-dropdown-trigger"
+  class="ant-dropdown-trigger ant-dropdown-link"
 >
   Hover me 
   <span
@@ -84,7 +84,7 @@ exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
 <div
-  class="site-dropdown-context-menu ant-dropdown-trigger"
+  class="ant-dropdown-trigger site-dropdown-context-menu"
   style="text-align:center;height:200px;line-height:200px"
 >
   Right Click on here
@@ -107,7 +107,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
       type="button"
     >
       <span
@@ -144,7 +144,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
       type="button"
     >
       <span
@@ -182,7 +182,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
       disabled=""
       type="button"
     >
@@ -220,7 +220,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only ant-btn-loading"
+      class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-dropdown-trigger"
       type="button"
     >
       <span
@@ -282,7 +282,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
 
 exports[`renders ./components/dropdown/demo/event.md correctly 1`] = `
 <a
-  class="ant-dropdown-link ant-dropdown-trigger"
+  class="ant-dropdown-trigger ant-dropdown-link"
 >
   Hover me, Click menu item 
   <span
@@ -310,7 +310,7 @@ exports[`renders ./components/dropdown/demo/event.md correctly 1`] = `
 
 exports[`renders ./components/dropdown/demo/item.md correctly 1`] = `
 <a
-  class="ant-dropdown-link ant-dropdown-trigger"
+  class="ant-dropdown-trigger ant-dropdown-link"
 >
   Hover me 
   <span
@@ -338,7 +338,7 @@ exports[`renders ./components/dropdown/demo/item.md correctly 1`] = `
 
 exports[`renders ./components/dropdown/demo/menu-full.md correctly 1`] = `
 <a
-  class="ant-dropdown-link ant-dropdown-trigger"
+  class="ant-dropdown-trigger ant-dropdown-link"
 >
   Hover to check menu style 
   <span
@@ -366,7 +366,7 @@ exports[`renders ./components/dropdown/demo/menu-full.md correctly 1`] = `
 
 exports[`renders ./components/dropdown/demo/overlay-visible.md correctly 1`] = `
 <a
-  class="ant-dropdown-link ant-dropdown-trigger"
+  class="ant-dropdown-trigger ant-dropdown-link"
 >
   Hover me 
   <span
@@ -448,7 +448,7 @@ Array [
 
 exports[`renders ./components/dropdown/demo/sub-menu.md correctly 1`] = `
 <a
-  class="ant-dropdown-link ant-dropdown-trigger"
+  class="ant-dropdown-trigger ant-dropdown-link"
 >
   Cascading menu 
   <span
@@ -476,7 +476,7 @@ exports[`renders ./components/dropdown/demo/sub-menu.md correctly 1`] = `
 
 exports[`renders ./components/dropdown/demo/trigger.md correctly 1`] = `
 <a
-  class="ant-dropdown-link ant-dropdown-trigger"
+  class="ant-dropdown-trigger ant-dropdown-link"
 >
   Click me 
   <span

components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap

@@ -9,7 +9,7 @@ exports[`DropdownButton rtl render component should be rendered correctly in RTL
     type="button"
   />
   <button
-    class="ant-btn ant-dropdown-trigger ant-dropdown-rtl ant-btn-default ant-btn-icon-only ant-btn-rtl"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-rtl ant-dropdown-trigger ant-dropdown-rtl"
     type="button"
   >
     <span
@@ -45,7 +45,7 @@ exports[`DropdownButton should support href like Button 1`] = `
     href="https://ant.design"
   />
   <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
     type="button"
   >
     <span

components/dropdown/dropdown.tsx

@@ -144,9 +144,13 @@ const Dropdown: DropdownInterface = props => {
   const child = React.Children.only(children) as React.ReactElement<any>;
 
   const dropdownTrigger = cloneElement(child, {
-    className: classNames(child.props.className, `${prefixCls}-trigger`, {
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-    }),
+    className: classNames(
+      `${prefixCls}-trigger`,
+      {
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      child.props.className,
+    ),
     disabled,
   });
 

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -367,7 +367,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <span
-            class="ant-input-password ant-input-affix-wrapper"
+            class="ant-input-affix-wrapper ant-input-password"
           >
             <input
               action="click"
@@ -1938,7 +1938,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <span
-            class="ant-typography ant-form-text ant-typography-secondary"
+            class="ant-typography ant-typography-secondary ant-form-text"
           >
             ( 
             <span
@@ -2819,7 +2819,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <button
-            class="ant-btn login-form-button ant-btn-primary"
+            class="ant-btn ant-btn-primary login-form-button"
             type="submit"
           >
             <span>
@@ -2979,7 +2979,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <span
-            class="ant-input-password ant-input-affix-wrapper"
+            class="ant-input-affix-wrapper ant-input-password"
           >
             <input
               action="click"
@@ -3045,7 +3045,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <span
-            class="ant-input-password ant-input-affix-wrapper"
+            class="ant-input-affix-wrapper ant-input-password"
           >
             <input
               action="click"
@@ -7253,7 +7253,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
             >
               <span
                 aria-label="close-circle"
-                class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+                class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
                 role="button"
                 tabindex="-1"
               >
@@ -7325,7 +7325,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <span
-            class="ant-input-password ant-input-affix-wrapper"
+            class="ant-input-affix-wrapper ant-input-password"
           >
             <input
               action="click"
@@ -7414,7 +7414,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <span
-            class="ant-input-password ant-input-affix-wrapper"
+            class="ant-input-affix-wrapper ant-input-password"
           >
             <input
               action="click"
@@ -7428,7 +7428,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
             >
               <span
                 aria-label="close-circle"
-                class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+                class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
                 role="button"
                 tabindex="-1"
               >

components/input/ClearableLabeledInput.tsx

@@ -69,9 +69,12 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
     return (
       <CloseCircleFilled
         onClick={handleReset}
-        className={classNames(className, {
-          [`${className}-hidden`]: !needClear,
-        })}
+        className={classNames(
+          {
+            [`${className}-hidden`]: !needClear,
+          },
+          className,
+        )}
         role="button"
       />
     );
@@ -114,16 +117,20 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
 
     const prefixNode = prefix ? <span className={`${prefixCls}-prefix`}>{prefix}</span> : null;
 
-    const affixWrapperCls = classNames(className, `${prefixCls}-affix-wrapper`, {
-      [`${prefixCls}-affix-wrapper-focused`]: focused,
-      [`${prefixCls}-affix-wrapper-disabled`]: disabled,
-      [`${prefixCls}-affix-wrapper-sm`]: size === 'small',
-      [`${prefixCls}-affix-wrapper-lg`]: size === 'large',
-      [`${prefixCls}-affix-wrapper-input-with-clear-btn`]: suffix && allowClear && value,
-      [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
-      [`${prefixCls}-affix-wrapper-readonly`]: readOnly,
-      [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
-    });
+    const affixWrapperCls = classNames(
+      `${prefixCls}-affix-wrapper`,
+      {
+        [`${prefixCls}-affix-wrapper-focused`]: focused,
+        [`${prefixCls}-affix-wrapper-disabled`]: disabled,
+        [`${prefixCls}-affix-wrapper-sm`]: size === 'small',
+        [`${prefixCls}-affix-wrapper-lg`]: size === 'large',
+        [`${prefixCls}-affix-wrapper-input-with-clear-btn`]: suffix && allowClear && value,
+        [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
+        [`${prefixCls}-affix-wrapper-readonly`]: readOnly,
+        [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
+      },
+      className,
+    );
     return (
       <span
         ref={this.containerRef}
@@ -161,11 +168,15 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
       [`${wrapperClassName}-rtl`]: direction === 'rtl',
     });
 
-    const mergedGroupClassName = classNames(className, `${prefixCls}-group-wrapper`, {
-      [`${prefixCls}-group-wrapper-sm`]: size === 'small',
-      [`${prefixCls}-group-wrapper-lg`]: size === 'large',
-      [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
-    });
+    const mergedGroupClassName = classNames(
+      `${prefixCls}-group-wrapper`,
+      {
+        [`${prefixCls}-group-wrapper-sm`]: size === 'small',
+        [`${prefixCls}-group-wrapper-lg`]: size === 'large',
+        [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
 
     // Need another wrapper for changing display:table to display:inline-block
     // and put style prop in wrapper
@@ -188,13 +199,13 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
       });
     }
     const affixWrapperCls = classNames(
-      className,
       `${prefixCls}-affix-wrapper`,
       `${prefixCls}-affix-wrapper-textarea-with-clear-btn`,
       {
         [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
         [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
       },
+      className,
     );
     return (
       <span className={affixWrapperCls} style={style}>

components/input/Search.tsx

@@ -167,15 +167,23 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
     const getClassName = (size: SizeType) => {
       let inputClassName;
       if (enterButton) {
-        inputClassName = classNames(prefixCls, className, {
-          [`${prefixCls}-rtl`]: direction === 'rtl',
-          [`${prefixCls}-enter-button`]: !!enterButton,
-          [`${prefixCls}-${size}`]: !!size,
-        });
+        inputClassName = classNames(
+          prefixCls,
+          {
+            [`${prefixCls}-rtl`]: direction === 'rtl',
+            [`${prefixCls}-enter-button`]: !!enterButton,
+            [`${prefixCls}-${size}`]: !!size,
+          },
+          className,
+        );
       } else {
-        inputClassName = classNames(prefixCls, className, {
-          [`${prefixCls}-rtl`]: direction === 'rtl',
-        });
+        inputClassName = classNames(
+          prefixCls,
+          {
+            [`${prefixCls}-rtl`]: direction === 'rtl',
+          },
+          className,
+        );
       }
       return inputClassName;
     };

components/input/TextArea.tsx

@@ -75,9 +75,12 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
     return (
       <RcTextArea
         {...omit(this.props, ['allowClear', 'bordered'])}
-        className={classNames(this.props.className, {
-          [`${prefixCls}-borderless`]: !bordered,
-        })}
+        className={classNames(
+          {
+            [`${prefixCls}-borderless`]: !bordered,
+          },
+          this.props.className,
+        )}
         prefixCls={prefixCls}
         onChange={this.handleChange}
         ref={this.saveTextArea}

components/input/__tests__/__snapshots__/Password.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Input.Password rtl render component should be rendered correctly in RTL direction 1`] = `
 <span
-  class="ant-input-password ant-input-affix-wrapper ant-input-affix-wrapper-rtl"
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-rtl ant-input-password"
 >
   <input
     action="click"
@@ -43,7 +43,7 @@ exports[`Input.Password rtl render component should be rendered correctly in RTL
 
 exports[`Input.Password should change type when click 1`] = `
 <span
-  class="ant-input-password ant-input-affix-wrapper"
+  class="ant-input-affix-wrapper ant-input-password"
 >
   <input
     action="click"
@@ -84,7 +84,7 @@ exports[`Input.Password should change type when click 1`] = `
 
 exports[`Input.Password should change type when click 2`] = `
 <span
-  class="ant-input-password ant-input-affix-wrapper"
+  class="ant-input-affix-wrapper ant-input-password"
 >
   <input
     action="click"
@@ -122,7 +122,7 @@ exports[`Input.Password should change type when click 2`] = `
 
 exports[`Input.Password should change type when click 3`] = `
 <span
-  class="ant-input-password ant-input-affix-wrapper"
+  class="ant-input-affix-wrapper ant-input-password"
 >
   <input
     action="click"
@@ -163,7 +163,7 @@ exports[`Input.Password should change type when click 3`] = `
 
 exports[`Input.Password should support size 1`] = `
 <span
-  class="ant-input-password ant-input-password-large ant-input-affix-wrapper ant-input-affix-wrapper-lg"
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-password ant-input-password-large"
 >
   <input
     action="click"

components/input/__tests__/__snapshots__/Search.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Input.Search rtl render component should be rendered correctly in RTL direction 1`] = `
 <span
-  class="ant-input-search ant-input-search-rtl ant-input-affix-wrapper ant-input-affix-wrapper-rtl"
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-rtl ant-input-search ant-input-search-rtl"
 >
   <input
     class="ant-input"
@@ -39,13 +39,13 @@ exports[`Input.Search rtl render component should be rendered correctly in RTL d
 
 exports[`Input.Search should support addonAfter 1`] = `
 <span
-  class="ant-input-search ant-input-group-wrapper"
+  class="ant-input-group-wrapper ant-input-search"
 >
   <span
     class="ant-input-wrapper ant-input-group"
   >
     <span
-      class="ant-input-search ant-input-affix-wrapper"
+      class="ant-input-affix-wrapper ant-input-search"
     >
       <input
         class="ant-input"
@@ -91,7 +91,7 @@ exports[`Input.Search should support addonAfter 1`] = `
 
 exports[`Input.Search should support addonAfter 2`] = `
 <span
-  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+  class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
 >
   <span
     class="ant-input-wrapper ant-input-group"
@@ -105,7 +105,7 @@ exports[`Input.Search should support addonAfter 2`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-input-search-button ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-input-search-button"
         type="button"
       >
         <span
@@ -139,13 +139,13 @@ exports[`Input.Search should support addonAfter 2`] = `
 
 exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
 <span
-  class="ant-input-search ant-input-group-wrapper"
+  class="ant-input-group-wrapper ant-input-search"
 >
   <span
     class="ant-input-wrapper ant-input-group"
   >
     <span
-      class="ant-input-search ant-input-affix-wrapper"
+      class="ant-input-affix-wrapper ant-input-search"
     >
       <input
         class="ant-input"
@@ -189,13 +189,13 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
 
 exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
 <span
-  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+  class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
 >
   <span
     class="ant-input-wrapper ant-input-group"
   >
     <span
-      class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper"
+      class="ant-input-affix-wrapper ant-input-search ant-input-search-enter-button"
     >
       <input
         class="ant-input"
@@ -212,7 +212,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-input-search-button ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-input-search-button"
         type="button"
       >
         <span
@@ -244,7 +244,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
 
 exports[`Input.Search should support custom Button 1`] = `
 <span
-  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+  class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
 >
   <span
     class="ant-input-wrapper ant-input-group"
@@ -272,7 +272,7 @@ exports[`Input.Search should support custom Button 1`] = `
 
 exports[`Input.Search should support custom button 1`] = `
 <span
-  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+  class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
 >
   <span
     class="ant-input-wrapper ant-input-group"
@@ -297,7 +297,7 @@ exports[`Input.Search should support custom button 1`] = `
 
 exports[`Input.Search should support invalid addonAfter 1`] = `
 <span
-  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+  class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
 >
   <span
     class="ant-input-wrapper ant-input-group"
@@ -311,7 +311,7 @@ exports[`Input.Search should support invalid addonAfter 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-input-search-button ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-input-search-button"
         type="button"
       >
         <span
@@ -342,7 +342,7 @@ exports[`Input.Search should support invalid addonAfter 1`] = `
 
 exports[`Input.Search should support invalid suffix 1`] = `
 <span
-  class="ant-input-search ant-input-affix-wrapper"
+  class="ant-input-affix-wrapper ant-input-search"
 >
   <input
     class="ant-input"
@@ -379,7 +379,7 @@ exports[`Input.Search should support invalid suffix 1`] = `
 
 exports[`Input.Search should support loading 1`] = `
 <span
-  class="ant-input-search ant-input-affix-wrapper"
+  class="ant-input-affix-wrapper ant-input-search"
 >
   <input
     class="ant-input"
@@ -415,7 +415,7 @@ exports[`Input.Search should support loading 1`] = `
 
 exports[`Input.Search should support loading 2`] = `
 <span
-  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+  class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
 >
   <span
     class="ant-input-wrapper ant-input-group"
@@ -429,7 +429,7 @@ exports[`Input.Search should support loading 2`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-input-search-button ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-input-search-button"
         type="button"
       >
         <span

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -981,7 +981,7 @@ Array [
     >
       <span
         aria-label="close-circle"
-        class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+        class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
         role="button"
         tabindex="-1"
       >
@@ -1013,7 +1013,7 @@ Array [
     />
     <span
       aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-textarea-clear-icon ant-input-textarea-clear-icon-hidden"
+      class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
       role="button"
       tabindex="-1"
     >
@@ -1106,7 +1106,7 @@ exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = `
     />
     <span
       aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-textarea-clear-icon ant-input-textarea-clear-icon-hidden"
+      class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
       role="button"
       tabindex="-1"
     >
@@ -1140,7 +1140,7 @@ exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = `
     >
       <span
         aria-label="close-circle"
-        class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+        class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
         role="button"
         tabindex="-1"
       >
@@ -1335,7 +1335,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
       value="0571"
     />
     <span
-      class="ant-input-search ant-input-affix-wrapper"
+      class="ant-input-affix-wrapper ant-input-search"
       style="width:30%"
     >
       <input
@@ -2089,7 +2089,7 @@ exports[`renders ./components/input/demo/password-input.md correctly 1`] = `
     style="margin-bottom:8px"
   >
     <span
-      class="ant-input-password ant-input-affix-wrapper"
+      class="ant-input-affix-wrapper ant-input-password"
     >
       <input
         action="click"
@@ -2132,7 +2132,7 @@ exports[`renders ./components/input/demo/password-input.md correctly 1`] = `
     class="ant-space-item"
   >
     <span
-      class="ant-input-password ant-input-affix-wrapper"
+      class="ant-input-affix-wrapper ant-input-password"
     >
       <input
         action="click"
@@ -2287,7 +2287,7 @@ Array [
 exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
 Array [
   <span
-    class="ant-input-search ant-input-affix-wrapper"
+    class="ant-input-affix-wrapper ant-input-search"
     style="width:200px"
   >
     <input
@@ -2325,7 +2325,7 @@ Array [
   <br />,
   <br />,
   <span
-    class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+    class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
   >
     <span
       class="ant-input-wrapper ant-input-group"
@@ -2340,7 +2340,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-input-search-button ant-btn-primary"
+          class="ant-btn ant-btn-primary ant-input-search-button"
           type="button"
         >
           <span
@@ -2370,7 +2370,7 @@ Array [
   <br />,
   <br />,
   <span
-    class="ant-input-search ant-input-search-enter-button ant-input-search-large ant-input-group-wrapper ant-input-group-wrapper-lg"
+    class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"
   >
     <span
       class="ant-input-wrapper ant-input-group"
@@ -2385,7 +2385,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-input-search-button ant-btn-primary ant-btn-lg"
+          class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button"
           type="button"
         >
           <span>
@@ -2398,13 +2398,13 @@ Array [
   <br />,
   <br />,
   <span
-    class="ant-input-search ant-input-search-enter-button ant-input-search-large ant-input-group-wrapper ant-input-group-wrapper-lg"
+    class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"
   >
     <span
       class="ant-input-wrapper ant-input-group"
     >
       <span
-        class="ant-input-search ant-input-search-enter-button ant-input-search-large ant-input-affix-wrapper ant-input-affix-wrapper-lg"
+        class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"
       >
         <input
           class="ant-input ant-input-lg"
@@ -2442,7 +2442,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-input-search-button ant-btn-primary ant-btn-lg"
+          class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button"
           type="button"
         >
           <span>
@@ -2458,7 +2458,7 @@ Array [
 exports[`renders ./components/input/demo/search-input-loading.md correctly 1`] = `
 Array [
   <span
-    class="ant-input-search ant-input-affix-wrapper"
+    class="ant-input-affix-wrapper ant-input-search"
   >
     <input
       class="ant-input"
@@ -2494,7 +2494,7 @@ Array [
   <br />,
   <br />,
   <span
-    class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+    class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
   >
     <span
       class="ant-input-wrapper ant-input-group"
@@ -2509,7 +2509,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-input-search-button ant-btn-primary"
+          class="ant-btn ant-btn-primary ant-input-search-button"
           type="button"
         >
           <span

components/input/__tests__/__snapshots__/index.test.js.snap

@@ -51,7 +51,7 @@ exports[`Input allowClear should change type when click 2`] = `
   >
     <span
       aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
       role="button"
       tabindex="-1"
     >
@@ -88,7 +88,7 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
   >
     <span
       aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
       role="button"
       tabindex="-1"
     >
@@ -125,7 +125,7 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
   >
     <span
       aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
       role="button"
       tabindex="-1"
     >
@@ -162,7 +162,7 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
   >
     <span
       aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
       role="button"
       tabindex="-1"
     >
@@ -199,7 +199,7 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
   >
     <span
       aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
       role="button"
       tabindex="-1"
     >
@@ -236,7 +236,7 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
   >
     <span
       aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
       role="button"
       tabindex="-1"
     >
@@ -273,7 +273,7 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
   >
     <span
       aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
       role="button"
       tabindex="-1"
     >
@@ -357,7 +357,7 @@ exports[`Input should support size in form 1`] = `
 
 exports[`Input.Search should support suffix 1`] = `
 <span
-  class="ant-input-search ant-input-affix-wrapper"
+  class="ant-input-affix-wrapper ant-input-search"
 >
   <input
     class="ant-input"

components/input/__tests__/__snapshots__/textarea.test.js.snap

@@ -42,7 +42,7 @@ exports[`TextArea allowClear should change type when click 2`] = `
   />
   <span
     aria-label="close-circle"
-    class="anticon anticon-close-circle ant-input-textarea-clear-icon ant-input-textarea-clear-icon-hidden"
+    class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
     role="button"
     tabindex="-1"
   >
@@ -73,7 +73,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
   />
   <span
     aria-label="close-circle"
-    class="anticon anticon-close-circle ant-input-textarea-clear-icon ant-input-textarea-clear-icon-hidden"
+    class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
     role="button"
     tabindex="-1"
   >
@@ -104,7 +104,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
   />
   <span
     aria-label="close-circle"
-    class="anticon anticon-close-circle ant-input-textarea-clear-icon ant-input-textarea-clear-icon-hidden"
+    class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
     role="button"
     tabindex="-1"
   >
@@ -135,7 +135,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
   />
   <span
     aria-label="close-circle"
-    class="anticon anticon-close-circle ant-input-textarea-clear-icon ant-input-textarea-clear-icon-hidden"
+    class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
     role="button"
     tabindex="-1"
   >
@@ -166,7 +166,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
   />
   <span
     aria-label="close-circle"
-    class="anticon anticon-close-circle ant-input-textarea-clear-icon ant-input-textarea-clear-icon-hidden"
+    class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
     role="button"
     tabindex="-1"
   >
@@ -197,7 +197,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
   />
   <span
     aria-label="close-circle"
-    class="anticon anticon-close-circle ant-input-textarea-clear-icon ant-input-textarea-clear-icon-hidden"
+    class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
     role="button"
     tabindex="-1"
   >
@@ -228,7 +228,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
   />
   <span
     aria-label="close-circle"
-    class="anticon anticon-close-circle ant-input-textarea-clear-icon ant-input-textarea-clear-icon-hidden"
+    class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
     role="button"
     tabindex="-1"
   >

components/layout/Sider.tsx

@@ -217,12 +217,17 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
       minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349
       width: siderWidth,
     };
-    const siderCls = classNames(className, prefixCls, `${prefixCls}-${theme}`, {
-      [`${prefixCls}-collapsed`]: !!collapsed,
-      [`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
-      [`${prefixCls}-below`]: !!below,
-      [`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
-    });
+    const siderCls = classNames(
+      prefixCls,
+      `${prefixCls}-${theme}`,
+      {
+        [`${prefixCls}-collapsed`]: !!collapsed,
+        [`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
+        [`${prefixCls}-below`]: !!below,
+        [`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
+      },
+      className,
+    );
     return (
       <aside className={siderCls} {...divProps} style={divStyle}>
         <div className={`${prefixCls}-children`}>{children}</div>

components/layout/__tests__/__snapshots__/demo.test.js.snap

@@ -1582,7 +1582,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
       style="padding:24px 0"
     >
       <aside
-        class="site-layout-background ant-layout-sider ant-layout-sider-dark"
+        class="ant-layout-sider ant-layout-sider-dark site-layout-background"
         style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
       >
         <div
@@ -1881,7 +1881,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
     class="ant-layout"
   >
     <aside
-      class="site-layout-background ant-layout-sider ant-layout-sider-dark"
+      class="ant-layout-sider ant-layout-sider-dark site-layout-background"
       style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
     >
       <div

components/list/Item.tsx

@@ -103,9 +103,13 @@ const Item: ListItemTypeProps = ({
   const itemChildren = (
     <Element
       {...(others as any)} // `li` element `onCopy` prop args is not same as `div`
-      className={classNames(`${prefixCls}-item`, className, {
-        [`${prefixCls}-item-no-flex`]: !isFlexMode(),
-      })}
+      className={classNames(
+        `${prefixCls}-item`,
+        {
+          [`${prefixCls}-item-no-flex`]: !isFlexMode(),
+        },
+        className,
+      )}
     >
       {itemLayout === 'vertical' && extra
         ? [

components/list/__tests__/__snapshots__/demo.test.js.snap

@@ -1106,7 +1106,7 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1
 
 exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
 <div
-  class="ant-list demo-loadmore-list ant-list-split ant-list-loading"
+  class="ant-list ant-list-split ant-list-loading demo-loadmore-list"
 >
   <div
     class="ant-spin-nested-loading"

components/list/index.tsx

@@ -172,16 +172,20 @@ function List<T>({
       break;
   }
 
-  const classString = classNames(prefixCls, className, {
-    [`${prefixCls}-vertical`]: itemLayout === 'vertical',
-    [`${prefixCls}-${sizeCls}`]: sizeCls,
-    [`${prefixCls}-split`]: split,
-    [`${prefixCls}-bordered`]: bordered,
-    [`${prefixCls}-loading`]: isLoading,
-    [`${prefixCls}-grid`]: grid,
-    [`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem(),
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const classString = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-vertical`]: itemLayout === 'vertical',
+      [`${prefixCls}-${sizeCls}`]: sizeCls,
+      [`${prefixCls}-split`]: split,
+      [`${prefixCls}-bordered`]: bordered,
+      [`${prefixCls}-loading`]: isLoading,
+      [`${prefixCls}-grid`]: grid,
+      [`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem(),
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   const paginationProps = {
     ...defaultPaginationProps,

components/mentions/index.tsx

@@ -106,11 +106,14 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
 
   const prefixCls = getPrefixCls('mentions', customizePrefixCls);
 
-  const mergedClassName = classNames(className, {
-    [`${prefixCls}-disabled`]: disabled,
-    [`${prefixCls}-focused`]: focused,
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const mergedClassName = classNames(
+    {
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-focused`]: focused,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   return (
     <RcMentions

components/menu/MenuItem.tsx

@@ -63,11 +63,14 @@ export default class MenuItem extends React.Component<MenuItemProps> {
             >
               <Item
                 {...rest}
-                className={classNames(className, {
-                  [`${rootPrefixCls}-item-danger`]: danger,
-                  [`${rootPrefixCls}-item-only-child`]:
-                    (icon ? childrenLength + 1 : childrenLength) === 1,
-                })}
+                className={classNames(
+                  {
+                    [`${rootPrefixCls}-item-danger`]: danger,
+                    [`${rootPrefixCls}-item-only-child`]:
+                      (icon ? childrenLength + 1 : childrenLength) === 1,
+                  },
+                  className,
+                )}
                 title={title}
               >
                 {icon}

components/menu/index.tsx

@@ -61,9 +61,13 @@ class InternalMenu extends React.Component<InternalMenuProps> {
     };
 
     const prefixCls = getPrefixCls('menu', customizePrefixCls);
-    const menuClassName = classNames(className, `${prefixCls}-${theme}`, {
-      [`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
-    });
+    const menuClassName = classNames(
+      `${prefixCls}-${theme}`,
+      {
+        [`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
+      },
+      className,
+    );
 
     return (
       <MenuContext.Provider

components/pagination/Pagination.tsx

@@ -113,10 +113,13 @@ const Pagination: React.FC<PaginationProps> = ({
     const locale = { ...contextLocale, ...customLocale };
     const isSmall = size === 'small' || !!(xs && !size && restProps.responsive);
     const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
-    const extendedClassName = classNames(className, {
-      mini: isSmall,
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-    });
+    const extendedClassName = classNames(
+      {
+        mini: isSmall,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
 
     return (
       <RcPagination

components/pagination/__tests__/__snapshots__/demo.test.js.snap

@@ -1965,7 +1965,7 @@ Array [
       class="ant-pagination-options"
     >
       <div
-        class="ant-select ant-pagination-options-size-changer ant-select-sm ant-select-single ant-select-show-arrow"
+        class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
       >
         <div
           class="ant-select-selector"
@@ -2300,7 +2300,7 @@ Array [
       class="ant-pagination-options"
     >
       <div
-        class="ant-select ant-pagination-options-size-changer ant-select-sm ant-select-single ant-select-show-arrow ant-select-disabled"
+        class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled"
       >
         <div
           class="ant-select-selector"

components/radio/__tests__/__snapshots__/radio.test.js.snap

@@ -44,7 +44,7 @@ exports[`Radio rtl render component should be rendered correctly in RTL directio
 
 exports[`Radio should render correctly 1`] = `
 <label
-  class="customized ant-radio-wrapper"
+  class="ant-radio-wrapper customized"
 >
   <span
     class="ant-radio"

components/radio/radio.tsx

@@ -36,12 +36,15 @@ const InternalRadio: React.ForwardRefRenderFunction<unknown, RadioProps> = (prop
     radioProps.checked = props.value === context.value;
     radioProps.disabled = props.disabled || context.disabled;
   }
-  const wrapperClassString = classNames(className, {
-    [`${prefixCls}-wrapper`]: true,
-    [`${prefixCls}-wrapper-checked`]: radioProps.checked,
-    [`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
-    [`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
-  });
+  const wrapperClassString = classNames(
+    {
+      [`${prefixCls}-wrapper`]: true,
+      [`${prefixCls}-wrapper-checked`]: radioProps.checked,
+      [`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
+      [`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   return (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control

components/select/index.tsx

@@ -138,12 +138,15 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
       <SizeContext.Consumer>
         {size => {
           const mergedSize = customizeSize || size;
-          const mergedClassName = classNames(className, {
-            [`${prefixCls}-lg`]: mergedSize === 'large',
-            [`${prefixCls}-sm`]: mergedSize === 'small',
-            [`${prefixCls}-rtl`]: direction === 'rtl',
-            [`${prefixCls}-borderless`]: !bordered,
-          });
+          const mergedClassName = classNames(
+            {
+              [`${prefixCls}-lg`]: mergedSize === 'large',
+              [`${prefixCls}-sm`]: mergedSize === 'small',
+              [`${prefixCls}-rtl`]: direction === 'rtl',
+              [`${prefixCls}-borderless`]: !bordered,
+            },
+            className,
+          );
 
           return (
             <RcSelect<ValueType>

components/skeleton/Avatar.tsx

@@ -13,9 +13,14 @@ const SkeletonAvatar = (props: AvatarProps) => {
     const { prefixCls: customizePrefixCls, className, active } = props;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
     const otherProps = omit(props, ['prefixCls']);
-    const cls = classNames(prefixCls, className, `${prefixCls}-element`, {
-      [`${prefixCls}-active`]: active,
-    });
+    const cls = classNames(
+      prefixCls,
+      `${prefixCls}-element`,
+      {
+        [`${prefixCls}-active`]: active,
+      },
+      className,
+    );
     return (
       <div className={cls}>
         <Element prefixCls={`${prefixCls}-avatar`} {...otherProps} />

components/skeleton/Button.tsx

@@ -13,9 +13,14 @@ const SkeletonButton = (props: SkeletonButtonProps) => {
     const { prefixCls: customizePrefixCls, className, active } = props;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
     const otherProps = omit(props, ['prefixCls']);
-    const cls = classNames(prefixCls, className, `${prefixCls}-element`, {
-      [`${prefixCls}-active`]: active,
-    });
+    const cls = classNames(
+      prefixCls,
+      `${prefixCls}-element`,
+      {
+        [`${prefixCls}-active`]: active,
+      },
+      className,
+    );
     return (
       <div className={cls}>
         <Element prefixCls={`${prefixCls}-button`} {...otherProps} />

components/skeleton/Element.tsx

@@ -35,7 +35,7 @@ const Element = (props: SkeletonElementProps) => {
 
   return (
     <span
-      className={classNames(prefixCls, className, sizeCls, shapeCls)}
+      className={classNames(prefixCls, sizeCls, shapeCls, className)}
       style={{ ...sizeStyle, ...style }}
     />
   );

components/skeleton/Image.tsx

@@ -13,7 +13,7 @@ const SkeletonImage = (props: SkeletonImageProps) => {
   const renderSkeletonImage = ({ getPrefixCls }: ConfigConsumerProps) => {
     const { prefixCls: customizePrefixCls, className, style } = props;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const cls = classNames(prefixCls, className, `${prefixCls}-element`);
+    const cls = classNames(prefixCls, `${prefixCls}-element`, className);
 
     return (
       <div className={cls}>

components/skeleton/Input.tsx

@@ -13,9 +13,14 @@ const SkeletonInput = (props: SkeletonInputProps) => {
     const { prefixCls: customizePrefixCls, className, active } = props;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
     const otherProps = omit(props, ['prefixCls']);
-    const cls = classNames(prefixCls, className, `${prefixCls}-element`, {
-      [`${prefixCls}-active`]: active,
-    });
+    const cls = classNames(
+      prefixCls,
+      `${prefixCls}-element`,
+      {
+        [`${prefixCls}-active`]: active,
+      },
+      className,
+    );
     return (
       <div className={cls}>
         <Element prefixCls={`${prefixCls}-input`} {...otherProps} />

components/skeleton/Skeleton.tsx

@@ -141,12 +141,16 @@ const Skeleton = (props: SkeletonProps) => {
         );
       }
 
-      const cls = classNames(prefixCls, className, {
-        [`${prefixCls}-with-avatar`]: hasAvatar,
-        [`${prefixCls}-active`]: active,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls}-round`]: round,
-      });
+      const cls = classNames(
+        prefixCls,
+        {
+          [`${prefixCls}-with-avatar`]: hasAvatar,
+          [`${prefixCls}-active`]: active,
+          [`${prefixCls}-rtl`]: direction === 'rtl',
+          [`${prefixCls}-round`]: round,
+        },
+        className,
+      );
 
       return (
         <div className={cls}>

components/statistic/Statistic.tsx

@@ -41,9 +41,13 @@ const Statistic: React.FC<StatisticProps & ConfigConsumerProps> = props => {
     onMouseLeave,
   } = props;
   const valueNode = <StatisticNumber {...props} value={value} />;
-  const cls = classNames(prefixCls, className, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const cls = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
   return (
     <div className={cls} style={style} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       {title && <div className={`${prefixCls}-title`}>{title}</div>}

components/steps/index.tsx

@@ -48,9 +48,12 @@ export default class Steps extends React.Component<StepsProps, any> {
     const prefixCls = getPrefixCls('steps', this.props.prefixCls);
     const iconPrefix = getPrefixCls('', this.props.iconPrefix);
     const { percent, size } = this.props;
-    const className = classNames(this.props.className, {
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-    });
+    const className = classNames(
+      {
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      this.props.className,
+    );
     const icons = {
       finish: <CheckOutlined className={`${prefixCls}-finish-icon`} />,
       error: <CloseOutlined className={`${prefixCls}-error-icon`} />,

components/switch/index.tsx

@@ -61,11 +61,14 @@ const Switch = React.forwardRef<unknown, SwitchProps>(
       </div>
     );
 
-    const classes = classNames(className, {
-      [`${prefixCls}-small`]: (customizeSize || size) === 'small',
-      [`${prefixCls}-loading`]: loading,
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-    });
+    const classes = classNames(
+      {
+        [`${prefixCls}-small`]: (customizeSize || size) === 'small',
+        [`${prefixCls}-loading`]: loading,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
 
     return (
       <Wave insertExtraNode>

components/table/Table.tsx

@@ -467,9 +467,13 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
     };
   }
 
-  const wrapperClassNames = classNames(`${prefixCls}-wrapper`, className, {
-    [`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
-  });
+  const wrapperClassNames = classNames(
+    `${prefixCls}-wrapper`,
+    {
+      [`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
   return (
     <div className={wrapperClassNames} style={style}>
       <Spin spinning={false} {...spinProps}>

components/table/__tests__/__snapshots__/Table.filter.test.js.snap

@@ -92,7 +92,7 @@ exports[`Table.filter renders custom filter icon as ReactNode 1`] = `
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -200,7 +200,7 @@ exports[`Table.filter renders custom filter icon as string correctly 1`] = `
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -322,7 +322,7 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -456,7 +456,7 @@ exports[`Table.filter renders filter correctly 1`] = `
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -789,7 +789,7 @@ exports[`Table.filter should support getPopupContainer 1`] = `
                         class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -1022,7 +1022,7 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
                         class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -112,7 +112,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -1086,7 +1086,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -1129,7 +1129,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -1172,7 +1172,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -2773,7 +2773,7 @@ Array [
                           class="ant-table-filter-trigger-container"
                         >
                           <span
-                            class="ant-table-filter-trigger ant-dropdown-trigger"
+                            class="ant-dropdown-trigger ant-table-filter-trigger"
                             role="button"
                             tabindex="-1"
                           >
@@ -8319,7 +8319,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -9020,7 +9020,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
         </div>
       </div>
       <ul
-        class="ant-pagination ant-table-pagination ant-table-pagination-right mini"
+        class="ant-pagination mini ant-table-pagination ant-table-pagination-right"
         unselectable="unselectable"
       >
         <li
@@ -9198,7 +9198,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
           class="ant-pagination-options"
         >
           <div
-            class="ant-select ant-pagination-options-size-changer ant-select-sm ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -9344,7 +9344,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -9508,7 +9508,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                         class="ant-table-filter-trigger-container"
                       >
                         <span
-                          class="ant-table-filter-trigger ant-dropdown-trigger"
+                          class="ant-dropdown-trigger ant-table-filter-trigger"
                           role="button"
                           tabindex="-1"
                         >
@@ -11932,7 +11932,7 @@ Array [
                           class="ant-table-filter-trigger-container"
                         >
                           <span
-                            class="ant-table-filter-trigger ant-dropdown-trigger"
+                            class="ant-dropdown-trigger ant-table-filter-trigger"
                             role="button"
                             tabindex="-1"
                           >
@@ -12096,7 +12096,7 @@ Array [
                           class="ant-table-filter-trigger-container"
                         >
                           <span
-                            class="ant-table-filter-trigger ant-dropdown-trigger"
+                            class="ant-dropdown-trigger ant-table-filter-trigger"
                             role="button"
                             tabindex="-1"
                           >
@@ -14935,7 +14935,7 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
           </div>
         </div>
         <ul
-          class="ant-pagination ant-table-pagination ant-table-pagination-right mini"
+          class="ant-pagination mini ant-table-pagination ant-table-pagination-right"
           unselectable="unselectable"
         >
           <li
@@ -15134,7 +15134,7 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
           </div>
         </div>
         <ul
-          class="ant-pagination ant-table-pagination ant-table-pagination-right mini"
+          class="ant-pagination mini ant-table-pagination ant-table-pagination-right"
           unselectable="unselectable"
         >
           <li

components/tabs/__tests__/__snapshots__/demo.test.js.snap

@@ -1466,7 +1466,7 @@ Array [
     class="ant-checkbox-group"
   >
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox ant-checkbox-checked"
@@ -1486,7 +1486,7 @@ Array [
       </span>
     </label>
     <label
-      class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"
     >
       <span
         class="ant-checkbox ant-checkbox-checked"

components/tabs/index.tsx

@@ -52,12 +52,15 @@ function Tabs({ type, className, size, onEdit, hideAdd, centered, addIcon, ...pr
       direction={direction}
       {...props}
       moreTransitionName="slide-up"
-      className={classNames(className, {
-        [`${prefixCls}-${size}`]: size,
-        [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string),
-        [`${prefixCls}-editable-card`]: type === 'editable-card',
-        [`${prefixCls}-centered`]: centered,
-      })}
+      className={classNames(
+        {
+          [`${prefixCls}-${size}`]: size,
+          [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string),
+          [`${prefixCls}-editable-card`]: type === 'editable-card',
+          [`${prefixCls}-centered`]: centered,
+        },
+        className,
+      )}
       editable={editable}
       moreIcon={<EllipsisOutlined />}
       prefixCls={prefixCls}

components/time-picker/__tests__/__snapshots__/index.test.js.snap

@@ -1530,7 +1530,7 @@ exports[`TimePicker rtl render component should be rendered correctly in RTL dir
 
 exports[`TimePicker should support bordered 1`] = `
 <div
-  class="ant-picker custom-class ant-picker-borderless"
+  class="ant-picker ant-picker-borderless custom-class"
 >
   <div
     class="ant-picker-input"

components/transfer/__tests__/__snapshots__/demo.test.js.snap

@@ -3698,7 +3698,7 @@ Array [
                   </div>
                 </div>
                 <ul
-                  class="ant-pagination ant-table-pagination ant-table-pagination-right mini"
+                  class="ant-pagination mini ant-table-pagination ant-table-pagination-right"
                   unselectable="unselectable"
                 >
                   <li
@@ -4137,7 +4137,7 @@ Array [
                   </div>
                 </div>
                 <ul
-                  class="ant-pagination ant-table-pagination ant-table-pagination-right mini"
+                  class="ant-pagination mini ant-table-pagination ant-table-pagination-right"
                   unselectable="unselectable"
                 >
                   <li
@@ -4262,7 +4262,7 @@ Array [
 
 exports[`renders ./components/transfer/demo/tree-transfer.md correctly 1`] = `
 <div
-  class="tree-transfer ant-transfer ant-transfer-customize-list"
+  class="ant-transfer ant-transfer-customize-list tree-transfer"
 >
   <div
     class="ant-transfer-list"

components/transfer/index.tsx

@@ -371,11 +371,15 @@ class Transfer extends React.Component<TransferProps, TransferState> {
         const leftActive = targetSelectedKeys.length > 0;
         const rightActive = sourceSelectedKeys.length > 0;
 
-        const cls = classNames(className, prefixCls, {
-          [`${prefixCls}-disabled`]: disabled,
-          [`${prefixCls}-customize-list`]: !!children,
-          [`${prefixCls}-rtl`]: direction === 'rtl',
-        });
+        const cls = classNames(
+          prefixCls,
+          {
+            [`${prefixCls}-disabled`]: disabled,
+            [`${prefixCls}-customize-list`]: !!children,
+            [`${prefixCls}-rtl`]: direction === 'rtl',
+          },
+          className,
+        );
 
         const titles = this.getTitles(locale);
         const selectAllLabels = this.props.selectAllLabels || [];

components/tree/DirectoryTree.tsx

@@ -214,9 +214,13 @@ const DirectoryTree: React.ForwardRefRenderFunction<RcTree, DirectoryTreeProps>
   const { prefixCls: customizePrefixCls, className, ...otherProps } = props;
 
   const prefixCls = getPrefixCls('tree', customizePrefixCls);
-  const connectClassName = classNames(`${prefixCls}-directory`, className, {
-    [`${prefixCls}-directory-rtl`]: direction === 'rtl',
-  });
+  const connectClassName = classNames(
+    `${prefixCls}-directory`,
+    {
+      [`${prefixCls}-directory-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   return (
     <Tree

components/tree/Tree.tsx

@@ -165,11 +165,14 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
       virtual={virtual}
       {...newProps}
       prefixCls={prefixCls}
-      className={classNames(className, {
-        [`${prefixCls}-icon-hide`]: !showIcon,
-        [`${prefixCls}-block-node`]: blockNode,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      })}
+      className={classNames(
+        {
+          [`${prefixCls}-icon-hide`]: !showIcon,
+          [`${prefixCls}-block-node`]: blockNode,
+          [`${prefixCls}-rtl`]: direction === 'rtl',
+        },
+        className,
+      )}
       checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
       switcherIcon={(nodeProps: AntTreeNodeProps) =>
         renderSwitcherIcon(prefixCls, switcherIcon, showLine, nodeProps)

components/tree/__tests__/__snapshots__/demo.test.js.snap

@@ -980,7 +980,7 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
 
 exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -1332,7 +1332,7 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
 
 exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
 <div
-  class="ant-tree draggable-tree ant-tree-icon-hide ant-tree-block-node"
+  class="ant-tree ant-tree-icon-hide ant-tree-block-node draggable-tree"
 >
   <div
     role="tree"
@@ -2262,7 +2262,7 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
 exports[`renders ./components/tree/demo/search.md correctly 1`] = `
 <div>
   <span
-    class="ant-input-search ant-input-affix-wrapper"
+    class="ant-input-affix-wrapper ant-input-search"
     style="margin-bottom:8px"
   >
     <input

components/tree/__tests__/__snapshots__/directory.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Directory Tree DirectoryTree should expend all when use treeData and defaultExpandAll is true 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -218,7 +218,7 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
 
 exports[`Directory Tree defaultExpandAll 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -570,7 +570,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
 
 exports[`Directory Tree defaultExpandParent 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -726,7 +726,7 @@ exports[`Directory Tree defaultExpandParent 1`] = `
 
 exports[`Directory Tree expand click 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -984,7 +984,7 @@ exports[`Directory Tree expand click 1`] = `
 
 exports[`Directory Tree expand click 2`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -1140,7 +1140,7 @@ exports[`Directory Tree expand click 2`] = `
 
 exports[`Directory Tree expand double click 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -1398,7 +1398,7 @@ exports[`Directory Tree expand double click 1`] = `
 
 exports[`Directory Tree expand double click 2`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -1554,7 +1554,7 @@ exports[`Directory Tree expand double click 2`] = `
 
 exports[`Directory Tree expand with state control click 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -1701,7 +1701,7 @@ exports[`Directory Tree expand with state control click 1`] = `
 
 exports[`Directory Tree expand with state control doubleClick 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -1848,7 +1848,7 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
 
 exports[`Directory Tree expandedKeys update 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -2106,7 +2106,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
 
 exports[`Directory Tree group select 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -2458,7 +2458,7 @@ exports[`Directory Tree group select 1`] = `
 
 exports[`Directory Tree group select 2`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"
@@ -2841,7 +2841,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
 
 exports[`Directory Tree rtl render component should be rendered correctly in RTL direction 2`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-directory-rtl ant-tree-block-node ant-tree-rtl"
+  class="ant-tree ant-tree-block-node ant-tree-rtl ant-tree-directory ant-tree-directory-rtl"
 >
   <div
     role="tree"
@@ -2872,7 +2872,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
 
 exports[`Directory Tree selectedKeys update 1`] = `
 <div
-  class="ant-tree ant-tree-directory ant-tree-block-node"
+  class="ant-tree ant-tree-block-node ant-tree-directory"
 >
   <div
     role="tree"

components/typography/Base.tsx

@@ -502,13 +502,16 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
           return (
             <ResizeObserver onResize={this.resizeOnNextFrame} disabled={!rows}>
               <Typography
-                className={classNames(className, {
-                  [`${prefixCls}-${type}`]: type,
-                  [`${prefixCls}-disabled`]: disabled,
-                  [`${prefixCls}-ellipsis`]: rows,
-                  [`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
-                  [`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
-                })}
+                className={classNames(
+                  {
+                    [`${prefixCls}-${type}`]: type,
+                    [`${prefixCls}-disabled`]: disabled,
+                    [`${prefixCls}-ellipsis`]: rows,
+                    [`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
+                    [`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
+                  },
+                  className,
+                )}
                 style={{
                   ...style,
                   WebkitLineClamp: cssLineClamp ? rows : null,

components/typography/Editable.tsx

@@ -127,9 +127,14 @@ class Editable extends React.Component<EditableProps, EditableState> {
       maxLength,
       autoSize,
     } = this.props;
-    const textAreaClassName = classNames(prefixCls, className, `${prefixCls}-edit-content`, {
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-    });
+    const textAreaClassName = classNames(
+      prefixCls,
+      `${prefixCls}-edit-content`,
+      {
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
     return (
       <div className={textAreaClassName} style={style}>
         <TextArea

components/typography/Typography.tsx

@@ -43,9 +43,13 @@ const Typography: React.ForwardRefRenderFunction<{}, InternalTypographyProps> =
       {({ getPrefixCls, direction }: ConfigConsumerProps) => {
         const Component = component as any;
         const prefixCls = getPrefixCls('typography', customizePrefixCls);
-        const componentClassName = classNames(prefixCls, className, {
-          [`${prefixCls}-rtl`]: direction === 'rtl',
-        });
+        const componentClassName = classNames(
+          prefixCls,
+          {
+            [`${prefixCls}-rtl`]: direction === 'rtl',
+          },
+          className,
+        );
         return (
           <Component
             className={componentClassName}

components/upload/Upload.tsx

@@ -321,7 +321,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   if (listType === 'picture-card') {
     return (
-      <span className={classNames(className, `${prefixCls}-picture-card-wrapper`)}>
+      <span className={classNames(`${prefixCls}-picture-card-wrapper`, className)}>
         {renderUploadList(uploadButton)}
       </span>
     );

components/upload/__tests__/__snapshots__/demo.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`renders ./components/upload/demo/avatar.md correctly 1`] = `
 <span
-  class="avatar-uploader ant-upload-picture-card-wrapper"
+  class="ant-upload-picture-card-wrapper avatar-uploader"
 >
   <div
     class="ant-upload ant-upload-select ant-upload-select-picture-card"
@@ -178,7 +178,7 @@ exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
               </span>
             </a>
             <button
-              class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+              class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
               title="Remove file"
               type="button"
             >
@@ -379,7 +379,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
                 class="ant-upload-list-item-card-actions "
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -459,7 +459,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
                 class="ant-upload-list-item-card-actions "
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -538,7 +538,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
               class="ant-upload-list-item-card-actions "
             >
               <button
-                class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                 title="Remove file"
                 type="button"
               >
@@ -794,7 +794,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
               </span>
             </a>
             <button
-              class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+              class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
               title="Remove file"
               type="button"
             >
@@ -913,7 +913,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
               </span>
             </a>
             <button
-              class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+              class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
               title="Remove file"
               type="button"
             >
@@ -1033,7 +1033,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
             </span>
           </a>
           <button
-            class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+            class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
             title="Remove file"
             type="button"
           >
@@ -1152,7 +1152,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
             </span>
           </a>
           <button
-            class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+            class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
             title="Remove file"
             type="button"
           >
@@ -1263,7 +1263,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
             </span>
           </a>
           <button
-            class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+            class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
             title="Remove file"
             type="button"
           >
@@ -1441,7 +1441,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
                 class="ant-upload-list-item-card-actions "
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -1549,7 +1549,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               </span>
             </a>
             <button
-              class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+              class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
               title="Remove file"
               type="button"
             >
@@ -1644,7 +1644,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               </span>
             </a>
             <button
-              class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+              class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
               title="Remove file"
               type="button"
             >
@@ -1739,7 +1739,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               </span>
             </a>
             <button
-              class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+              class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
               title="Remove file"
               type="button"
             >
@@ -1834,7 +1834,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               </span>
             </a>
             <button
-              class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+              class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
               title="Remove file"
               type="button"
             >
@@ -2004,7 +2004,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
             </span>
           </a>
           <button
-            class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+            class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
             title="Remove file"
             type="button"
           >
@@ -2170,7 +2170,7 @@ Array [
                   class="ant-upload-list-item-card-actions picture"
                 >
                   <button
-                    class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                    class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                     title="Remove file"
                     type="button"
                   >
@@ -2263,7 +2263,7 @@ Array [
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -2383,7 +2383,7 @@ Array [
                   class="ant-upload-list-item-card-actions picture"
                 >
                   <button
-                    class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                    class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                     title="Remove file"
                     type="button"
                   >
@@ -2476,7 +2476,7 @@ Array [
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -2716,7 +2716,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
                 class="ant-upload-list-item-card-actions "
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-upload-list-item-card-actions-btn"
                   title="Download file"
                   type="button"
                 >
@@ -2725,7 +2725,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
                   </span>
                 </button>
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -2805,7 +2805,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
                 class="ant-upload-list-item-card-actions "
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-upload-list-item-card-actions-btn"
                   title="Download file"
                   type="button"
                 >
@@ -2814,7 +2814,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
                   </span>
                 </button>
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -2893,7 +2893,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
               class="ant-upload-list-item-card-actions "
             >
               <button
-                class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                 title="Remove file"
                 type="button"
               >

components/upload/__tests__/__snapshots__/uploadlist.test.js.snap

@@ -71,7 +71,7 @@ exports[`Upload List handle error 1`] = `
               class="ant-upload-list-item-card-actions "
             >
               <button
-                class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                 title="Remove file"
                 type="button"
               >
@@ -178,7 +178,7 @@ exports[`Upload List should be uploading when upload a file 1`] = `
                 class="ant-upload-list-item-card-actions "
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -306,7 +306,7 @@ exports[`Upload List should be uploading when upload a file 2`] = `
                 class="ant-upload-list-item-card-actions "
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -445,7 +445,7 @@ exports[`Upload List should non-image format file preview 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -513,7 +513,7 @@ exports[`Upload List should non-image format file preview 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -601,7 +601,7 @@ exports[`Upload List should non-image format file preview 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -689,7 +689,7 @@ exports[`Upload List should non-image format file preview 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -757,7 +757,7 @@ exports[`Upload List should non-image format file preview 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -825,7 +825,7 @@ exports[`Upload List should non-image format file preview 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -893,7 +893,7 @@ exports[`Upload List should non-image format file preview 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -961,7 +961,7 @@ exports[`Upload List should non-image format file preview 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -1029,7 +1029,7 @@ exports[`Upload List should non-image format file preview 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -1097,7 +1097,7 @@ exports[`Upload List should non-image format file preview 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -1208,7 +1208,7 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >
@@ -1261,7 +1261,7 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
                 class="ant-upload-list-item-card-actions picture"
               >
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Download file"
                   type="button"
                 >
@@ -1270,7 +1270,7 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
                   </i>
                 </button>
                 <button
-                  class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
+                  class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
                   title="Remove file"
                   type="button"
                 >