chore: Unified variable naming style (#55158)

components/button/button.tsx

@@ -1,7 +1,7 @@
 import React, { Children, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { omit, useComposeRef } from '@rc-component/util';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
-import classNames from 'classnames';
+import cls from 'classnames';
 
 import useMergeSemantic from '../_util/hooks/useMergeSemantic';
 import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks/useMergeSemantic';
@@ -132,9 +132,9 @@ const InternalCompoundedButton = React.forwardRef<
     block = false,
     // React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
     htmlType = 'button',
-    classNames: buttonClassNames,
+    classNames,
     styles,
-    style: customStyle = {},
+    style,
     autoInsertSpace,
     autoFocus,
     ...rest
@@ -345,7 +345,7 @@ const InternalCompoundedButton = React.forwardRef<
     ButtonStylesType,
     ButtonProps
   >(
-    [_skipSemantic ? undefined : contextClassNames, buttonClassNames],
+    [_skipSemantic ? undefined : contextClassNames, classNames],
     [_skipSemantic ? undefined : contextStyles, styles],
     undefined,
     {
@@ -354,7 +354,7 @@ const InternalCompoundedButton = React.forwardRef<
   );
 
   // ========================= Render =========================
-  const classes = classNames(
+  const classes = cls(
     prefixCls,
     hashId,
     cssVarCls,
@@ -385,7 +385,7 @@ const InternalCompoundedButton = React.forwardRef<
   const fullStyle: React.CSSProperties = {
     ...mergedStyles.root,
     ...contextStyle,
-    ...customStyle,
+    ...style,
   };
 
   const iconSharedProps = {
@@ -425,7 +425,7 @@ const InternalCompoundedButton = React.forwardRef<
     return (
       <a
         {...linkButtonRestProps}
-        className={classNames(classes, {
+        className={cls(classes, {
           [`${prefixCls}-disabled`]: mergedDisabled,
         })}
         href={mergedDisabled ? undefined : linkButtonRestProps.href}

components/pagination/Pagination.tsx

@@ -9,7 +9,7 @@ import type {
 } from '@rc-component/pagination';
 import RcPagination from '@rc-component/pagination';
 import enUS from '@rc-component/pagination/lib/locale/en_US';
-import classNames from 'classnames';
+import cls from 'classnames';
 
 import useMergeSemantic from '../_util/hooks/useMergeSemantic';
 import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks/useMergeSemantic';
@@ -75,7 +75,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     selectComponentClass,
     pageSizeOptions,
     styles,
-    classNames: paginationClassNames,
+    classNames,
     ...restProps
   } = props;
   const { xs } = useBreakpoint(responsive);
@@ -111,7 +111,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     PaginationClassNamesType,
     PaginationStylesType,
     PaginationProps
-  >([contextClassNames, paginationClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 
@@ -174,7 +174,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
           propSizeChangerOnChange?.(nextSize, option);
         }}
         size={isSmall ? 'small' : 'middle'}
-        className={classNames(sizeChangerClassName, propSizeChangerClassName)}
+        className={cls(sizeChangerClassName, propSizeChangerClassName)}
       />
     );
   };
@@ -233,7 +233,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
 
   const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
 
-  const extendedClassName = classNames(
+  const extendedClassName = cls(
     {
       [`${prefixCls}-${align}`]: !!align,
       [`${prefixCls}-mini`]: isSmall,

components/space/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { toArray } from '@rc-component/util';
-import classNames from 'classnames';
+import cls from 'classnames';
 
 import { isPresetSize, isValidGapNumber } from '../_util/gapSize';
 import useMergeSemantic from '../_util/hooks/useMergeSemantic';
@@ -69,7 +69,7 @@ const InternalSpace = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref)
     style,
     vertical,
     wrap = false,
-    classNames: spaceClassNames,
+    classNames,
     styles,
     ...restProps
   } = props;
@@ -108,11 +108,11 @@ const InternalSpace = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref)
     SpaceClassNamesType,
     SpaceStylesType,
     SpaceProps
-  >([contextClassNames, spaceClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 
-  const rootClassNames = classNames(
+  const rootClassNames = cls(
     prefixCls,
     contextClassName,
     hashId,
@@ -129,7 +129,7 @@ const InternalSpace = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref)
     mergedClassNames.root,
   );
 
-  const itemClassName = classNames(`${prefixCls}-item`, mergedClassNames.item);
+  const itemClassName = cls(`${prefixCls}-item`, mergedClassNames.item);
 
   // Calculate latest one
   let latestIndex = 0;