diff --git a/package.json b/package.json
index 90bea5ea..2dcae1d3 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "@rc-component/motion": "^1.1.3",
     "@rc-component/portal": "^2.0.0",
     "@rc-component/util": "^1.0.1",
-    "classnames": "^2.2.6"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/drawer": "^1.0.0",
diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
index 1fbfcd92..973a7222 100644
--- a/src/Dialog/Content/Panel.tsx
+++ b/src/Dialog/Content/Panel.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useComposeRef } from '@rc-component/util/lib/ref';
 import React, { useMemo, useRef } from 'react';
 import { RefContext } from '../../context';
@@ -90,7 +90,7 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
   // ================================ Render ================================
   const footerNode = footer ? (
     <div
-      className={classNames(`${prefixCls}-footer`, modalClassNames?.footer)}
+      className={clsx(`${prefixCls}-footer`, modalClassNames?.footer)}
       style={{ ...modalStyles?.footer }}
     >
       {footer}
@@ -99,11 +99,11 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
 
   const headerNode = title ? (
     <div
-      className={classNames(`${prefixCls}-header`, modalClassNames?.header)}
+      className={clsx(`${prefixCls}-header`, modalClassNames?.header)}
       style={{ ...modalStyles?.header }}
     >
       <div
-        className={classNames(`${prefixCls}-title`, modalClassNames?.title)}
+        className={clsx(`${prefixCls}-title`, modalClassNames?.title)}
         id={ariaId}
         style={{ ...modalStyles?.title }}
       >
@@ -140,13 +140,13 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
 
   const content = (
     <div
-      className={classNames(`${prefixCls}-container`, modalClassNames?.container)}
+      className={clsx(`${prefixCls}-container`, modalClassNames?.container)}
       style={modalStyles?.container}
     >
       {closerNode}
       {headerNode}
       <div
-        className={classNames(`${prefixCls}-body`, modalClassNames?.body)}
+        className={clsx(`${prefixCls}-body`, modalClassNames?.body)}
         style={{ ...bodyStyle, ...modalStyles?.body }}
         {...bodyProps}
       >
@@ -164,7 +164,7 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
       aria-modal="true"
       ref={mergedRef}
       style={{ ...style, ...contentStyle }}
-      className={classNames(prefixCls, className)}
+      className={clsx(prefixCls, className)}
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
     >
diff --git a/src/Dialog/Content/index.tsx b/src/Dialog/Content/index.tsx
index df6a97ea..665de5bf 100644
--- a/src/Dialog/Content/index.tsx
+++ b/src/Dialog/Content/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
 import { offset } from '../../util';
 import type { PanelProps, PanelRef } from './Panel';
@@ -82,7 +82,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
           prefixCls={prefixCls}
           holderRef={motionRef}
           style={{ ...motionStyle, ...style, ...contentStyle }}
-          className={classNames(className, motionClassName)}
+          className={clsx(className, motionClassName)}
         />
       )}
     </CSSMotion>
diff --git a/src/Dialog/Mask.tsx b/src/Dialog/Mask.tsx
index 389c9c36..efa3f8a5 100644
--- a/src/Dialog/Mask.tsx
+++ b/src/Dialog/Mask.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
 
 export type MaskProps = {
@@ -24,7 +24,7 @@ const Mask: React.FC<MaskProps> = (props) => {
         <div
           ref={ref}
           style={{ ...motionStyle, ...style }}
-          className={classNames(`${prefixCls}-mask`, motionClassName, className)}
+          className={clsx(`${prefixCls}-mask`, motionClassName, className)}
           {...maskProps}
         />
       )}
diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
index 3512e772..456e7f14 100644
--- a/src/Dialog/index.tsx
+++ b/src/Dialog/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import contains from '@rc-component/util/lib/Dom/contains';
 import useId from '@rc-component/util/lib/hooks/useId';
 import KeyCode from '@rc-component/util/lib/KeyCode';
@@ -187,7 +187,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
   // ========================= Render =========================
   return (
     <div
-      className={classNames(`${prefixCls}-root`, rootClassName)}
+      className={clsx(`${prefixCls}-root`, rootClassName)}
       style={rootStyle}
       {...pickAttrs(props, { data: true })}
     >
@@ -202,7 +202,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
       <div
         tabIndex={-1}
         onKeyDown={onWrapperKeyDown}
-        className={classNames(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper)}
+        className={clsx(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper)}
         ref={wrapperRef}
         onClick={onWrapperClick}
         style={mergedStyle}