react-component · li-jia-nan · Sep 28, 2025 · Sep 27, 2025
diff --git a/docs/examples/animation.tsx b/docs/examples/animation.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import CSSMotionList from 'rc-animate/lib/CSSMotionList';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import toArray from '@rc-component/util/lib/Children/toArray';
 import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
@@ -27,7 +27,7 @@ const MotionBody: React.FC<MotionBodyProps> = ({ children, ...props }) => {
         {({ key, className }) => {
           const node = nodesRef.current[key];
           return React.cloneElement<any>(node, {
-            className: classNames(node.props.className, className),
+            className: clsx(node.props.className, className),
           });
         }}
       </CSSMotionList>

diff --git a/docs/examples/virtual-list-grid.tsx b/docs/examples/virtual-list-grid.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { VariableSizeGrid as Grid } from 'react-window';
 import Table from 'rc-table';
 import '../../assets/index.less';
@@ -72,7 +72,7 @@ const Demo = () => {
       >
         {({ columnIndex, rowIndex, style }) => (
           <div
-            className={classNames('virtual-cell', {
+            className={clsx('virtual-cell', {
               'virtual-cell-last': columnIndex === columns.length - 1,
             })}
             style={style}

diff --git a/docs/examples/virtual-list.tsx b/docs/examples/virtual-list.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { VariableSizeGrid as Grid } from 'react-window';
 import Table from 'rc-table';
 import '../../assets/index.less';
@@ -23,7 +23,7 @@ for (let i = 0; i < 100000; i += 1) {
 
 const Cell = ({ columnIndex, rowIndex, style }) => (
   <div
-    className={classNames('virtual-cell', {
+    className={clsx('virtual-cell', {
       'virtual-cell-last': columnIndex === columns.length - 1,
     })}
     style={style}

diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "@rc-component/context": "^1.4.0",
     "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/util": "^1.1.0",
-    "classnames": "^2.2.5",
+    "clsx": "^2.1.1",
     "rc-virtual-list": "^3.14.2"
   },
   "devDependencies": {

diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import Cell from '../Cell';
 import { responseImmutable } from '../context/TableContext';
@@ -170,15 +170,13 @@ const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
     <RowComponent
       {...rowProps}
       data-row-key={rowKey}
-      className={cls(
+      className={clsx(
         className,
         `${prefixCls}-row`,
         `${prefixCls}-row-level-${indent}`,
         rowProps?.className,
         classNames.row,
-        {
-          [expandedClsName]: indent >= 1,
-        },
+        { [expandedClsName]: indent >= 1 },
       )}
       style={{
         ...style,
@@ -201,7 +199,7 @@ const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
 
         return (
           <Cell<RecordType>
-            className={cls(columnClassName, classNames.cell)}
+            className={clsx(columnClassName, classNames.cell)}
             style={styles.cell}
             ellipsis={column.ellipsis}
             align={column.align}
@@ -232,7 +230,7 @@ const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
     expandRowNode = (
       <ExpandedRow
         expanded={expanded}
-        className={cls(
+        className={clsx(
           `${prefixCls}-expanded-row`,
           `${prefixCls}-expanded-row-level-${indent + 1}`,
           expandedClsName,

diff --git a/src/Body/index.tsx b/src/Body/index.tsx
@@ -1,5 +1,6 @@
 import { useContext } from '@rc-component/context';
 import * as React from 'react';
+import { clsx } from 'clsx';
 import type { PerfRecord } from '../context/PerfContext';
 import PerfContext from '../context/PerfContext';
 import TableContext, { responseImmutable } from '../context/TableContext';
@@ -9,7 +10,6 @@ import { getColumnsKey } from '../utils/valueUtil';
 import BodyRow from './BodyRow';
 import ExpandedRow from './ExpandedRow';
 import MeasureRow from './MeasureRow';
-import cls from 'classnames';
 
 export interface BodyProps<RecordType> {
   data: readonly RecordType[];
@@ -136,7 +136,7 @@ const Body = <RecordType,>(props: BodyProps<RecordType>) => {
     <PerfContext.Provider value={perfRef.current}>
       <WrapperComponent
         style={bodyStyles.wrapper}
-        className={cls(`${prefixCls}-tbody`, bodyCls.wrapper)}
+        className={clsx(`${prefixCls}-tbody`, bodyCls.wrapper)}
       >
         {/* Measure body column width with additional hidden col */}
         {measureColumnWidth && (

diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
@@ -1,5 +1,5 @@
 import { useContext } from '@rc-component/context';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import TableContext from '../context/TableContext';
 import devRenderTimes from '../hooks/useRenderTimes';
@@ -218,7 +218,7 @@ const Cell = <RecordType,>(props: CellProps<RecordType>) => {
     });
 
   // >>>>> ClassName
-  const mergedClassName = cls(
+  const mergedClassName = clsx(
     cellPrefixCls,
     className,
     {

diff --git a/src/FixedHolder/index.tsx b/src/FixedHolder/index.tsx
@@ -1,5 +1,5 @@
 import { useContext } from '@rc-component/context';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { fillRef } from '@rc-component/util/lib/ref';
 import * as React from 'react';
 import { useMemo } from 'react';
@@ -175,7 +175,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
         ...style,
       }}
       ref={setScrollRef}
-      className={classNames(className, {
+      className={clsx(className, {
         [stickyClassName]: !!stickyClassName,
       })}
     >

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { clsx } from 'clsx';
 import { useContext } from '@rc-component/context';
 import TableContext, { responseImmutable } from '../context/TableContext';
 import devRenderTimes from '../hooks/useRenderTimes';
@@ -11,7 +12,6 @@ import type {
   StickyOffsets,
 } from '../interface';
 import HeaderRow from './HeaderRow';
-import cls from 'classnames';
 import type { TableProps } from '..';
 
 function parseHeaderRows<RecordType>(
@@ -33,7 +33,7 @@ function parseHeaderRows<RecordType>(
     const colSpans: number[] = columns.filter(Boolean).map(column => {
       const cell: CellType<RecordType> = {
         key: column.key,
-        className: cls(column.className, classNames.cell) || '',
+        className: clsx(column.className, classNames.cell) || '',
         style: styles.cell,
         children: column.title,
         column,
@@ -121,7 +121,7 @@ const Header = <RecordType extends any>(props: HeaderProps<RecordType>) => {
 
   return (
     <WrapperComponent
-      className={cls(`${prefixCls}-thead`, headerCls.wrapper)}
+      className={clsx(`${prefixCls}-thead`, headerCls.wrapper)}
       style={headerStyles.wrapper}
     >
       {rows.map((row, rowIndex) => {

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -25,7 +25,7 @@
  */
 
 import type { CompareProps } from '@rc-component/context/lib/Immutable';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import ResizeObserver from '@rc-component/resize-observer';
 import { getTargetScrollBarSize } from '@rc-component/util/lib/getScrollBarSize';
 import useEvent from '@rc-component/util/lib/hooks/useEvent';
@@ -779,12 +779,8 @@ const Table = <RecordType extends DefaultRecordType>(
     // >>>>>> Unique table
     groupTableNode = (
       <div
-        style={{
-          ...scrollXStyle,
-          ...scrollYStyle,
-          ...styles?.content,
-        }}
-        className={cls(`${prefixCls}-content`, classNames?.content)}
+        style={{ ...scrollXStyle, ...scrollYStyle, ...styles?.content }}
+        className={clsx(`${prefixCls}-content`, classNames?.content)}
         onScroll={onInternalScroll}
         ref={scrollBodyRef}
       >
@@ -817,7 +813,7 @@ const Table = <RecordType extends DefaultRecordType>(
 
   let fullTable = (
     <div
-      className={cls(prefixCls, className, {
+      className={clsx(prefixCls, className, {
         [`${prefixCls}-rtl`]: direction === 'rtl',
         [`${prefixCls}-fix-start-shadow`]: horizonScroll,
         [`${prefixCls}-fix-end-shadow`]: horizonScroll,
@@ -837,19 +833,19 @@ const Table = <RecordType extends DefaultRecordType>(
       {...dataProps}
     >
       {title && (
-        <Panel className={cls(`${prefixCls}-title`, classNames?.title)} style={styles?.title}>
+        <Panel className={clsx(`${prefixCls}-title`, classNames?.title)} style={styles?.title}>
           {title(mergedData)}
         </Panel>
       )}
       <div
         ref={scrollBodyContainerRef}
-        className={cls(`${prefixCls}-container`, classNames?.section)}
+        className={clsx(`${prefixCls}-container`, classNames?.section)}
         style={styles?.section}
       >
         {groupTableNode}
       </div>
       {footer && (
-        <Panel className={cls(`${prefixCls}-footer`, classNames?.footer)} style={styles?.footer}>
+        <Panel className={clsx(`${prefixCls}-footer`, classNames?.footer)} style={styles?.footer}>
           {footer(mergedData)}
         </Panel>
       )}

diff --git a/src/VirtualTable/BodyLine.tsx b/src/VirtualTable/BodyLine.tsx
@@ -1,5 +1,5 @@
 import { useContext } from '@rc-component/context';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import Cell from '../Cell';
 import TableContext, { responseImmutable } from '../context/TableContext';
@@ -58,7 +58,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
 
     expandRowNode = (
       <RowComponent
-        className={classNames(
+        className={clsx(
           `${prefixCls}-expanded-row`,
           `${prefixCls}-expanded-row-level-${indent + 1}`,
           expandedClsName,
@@ -67,9 +67,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
         <Cell
           component={cellComponent}
           prefixCls={prefixCls}
-          className={classNames(rowCellCls, {
-            [`${rowCellCls}-fixed`]: fixColumn,
-          })}
+          className={clsx(rowCellCls, { [`${rowCellCls}-fixed`]: fixColumn })}
           additionalProps={additionalProps}
         >
           {expandContent}
@@ -95,7 +93,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
       {...restProps}
       data-row-key={rowKey}
       ref={rowSupportExpand ? null : ref}
-      className={classNames(className, `${prefixCls}-row`, rowProps?.className, {
+      className={clsx(className, `${prefixCls}-row`, rowProps?.className, {
         [`${prefixCls}-row-extra`]: extra,
       })}
       style={{ ...rowStyle, ...rowProps?.style }}

diff --git a/src/VirtualTable/VirtualCell.tsx b/src/VirtualTable/VirtualCell.tsx
@@ -1,5 +1,5 @@
 import { useContext } from '@rc-component/context';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { getCellProps } from '../Body/BodyRow';
 import Cell from '../Cell';
@@ -113,7 +113,7 @@ const VirtualCell = <RecordType,>(props: VirtualCellProps<RecordType>) => {
 
   return (
     <Cell
-      className={classNames(columnClassName, className)}
+      className={clsx(columnClassName, className)}
       ellipsis={column.ellipsis}
       align={column.align}
       scope={column.rowScope}

diff --git a/src/VirtualTable/index.tsx b/src/VirtualTable/index.tsx
@@ -1,5 +1,5 @@
 import type { CompareProps } from '@rc-component/context/lib/Immutable';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useEvent, warning } from '@rc-component/util';
 import * as React from 'react';
 import { INTERNAL_HOOKS } from '../constant';
@@ -74,11 +74,8 @@ const VirtualTable = <RecordType,>(
     <StaticContext.Provider value={context}>
       <Table
         {...props}
-        className={classNames(className, `${prefixCls}-virtual`)}
-        scroll={{
-          ...scroll,
-          x: scrollX,
-        }}
+        className={clsx(className, `${prefixCls}-virtual`)}
+        scroll={{ ...scroll, x: scrollX }}
         components={{
           ...components,
           // fix https://github.com/ant-design/ant-design/issues/48991

diff --git a/src/hooks/useRowInfo.tsx b/src/hooks/useRowInfo.tsx
@@ -3,7 +3,7 @@ import type { TableContextProps } from '../context/TableContext';
 import TableContext from '../context/TableContext';
 import { getColumnsKey } from '../utils/valueUtil';
 import { useEvent } from '@rc-component/util';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export default function useRowInfo<RecordType>(
   record: RecordType,
@@ -116,7 +116,7 @@ export default function useRowInfo<RecordType>(
     expandable: mergedExpandable,
     rowProps: {
       ...rowProps,
-      className: classNames(computeRowClassName, rowProps?.className),
+      className: clsx(computeRowClassName, rowProps?.className),
       onClick,
     },
   };

diff --git a/src/stickyScrollBar.tsx b/src/stickyScrollBar.tsx
@@ -1,5 +1,5 @@
 import { useContext } from '@rc-component/context';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import getScrollBarSize from '@rc-component/util/lib/getScrollBarSize';
 import * as React from 'react';
 import TableContext from './context/TableContext';
@@ -196,7 +196,7 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
       <div
         onMouseDown={onMouseDown}
         ref={scrollBarRef}
-        className={classNames(`${prefixCls}-sticky-scroll-bar`, {
+        className={clsx(`${prefixCls}-sticky-scroll-bar`, {
           [`${prefixCls}-sticky-scroll-bar-active`]: isActive,
         })}
         style={{

diff --git a/src/utils/expandUtil.tsx b/src/utils/expandUtil.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { RenderExpandIconProps, Key, GetRowKey, ExpandableConfig } from '../interface';
 
 export function renderExpandIcon<RecordType>({
@@ -12,7 +12,7 @@ export function renderExpandIcon<RecordType>({
   const expandClassName = `${prefixCls}-row-expand-icon`;
 
   if (!expandable) {
-    return <span className={classNames(expandClassName, `${prefixCls}-row-spaced`)} />;
+    return <span className={clsx(expandClassName, `${prefixCls}-row-spaced`)} />;
   }
 
   const onClick: React.MouseEventHandler<HTMLElement> = event => {
@@ -22,7 +22,7 @@ export function renderExpandIcon<RecordType>({
 
   return (
     <span
-      className={classNames(expandClassName, {
+      className={clsx(expandClassName, {
         [`${prefixCls}-row-expanded`]: expanded,
         [`${prefixCls}-row-collapsed`]: !expanded,
       })}