feat: Drawer support classNames (#44935)

* feat: drawer support classNames * docs: update docs * feat: bump rc-drawer * feat: bump rc-drawer * feat: optimize style * feat: optimize type * feat: optimize type * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code --------- Signed-off-by: MadCcc <1075746765@qq.com> Co-authored-by: MadCcc <1075746765@qq.com>
2025-07-24 15:38:45 +08:00 · 2023-09-25 20:37:37 +08:00 · 2023-09-25 20:37:37 +08:00 · 69d048784f
commit 69d048784f
parent 01a62798a6
14 changed files with 477 additions and 20 deletions
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@ -16,6 +16,7 @@ import type { TabsProps } from '../tabs';
 import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import type { SizeType } from './SizeContext';
+import type { DrawerProps } from '../drawer';

 export const defaultIconPrefixCls = 'anticon';

@ -68,6 +69,11 @@ export interface ButtonConfig extends ComponentStyleConfig {
  styles?: ButtonProps['styles'];
 }

+export interface DrawerConfig extends ComponentStyleConfig {
+  classNames?: DrawerProps['classNames'];
+  styles?: DrawerProps['styles'];
+}
+
 export interface FlexConfig extends ComponentStyleConfig {
  vertical?: FlexProps['vertical'];
 }
@ -123,7 +129,7 @@ export interface ConfigConsumerProps {
  anchor?: ComponentStyleConfig;
  button?: ButtonConfig;
  divider?: ComponentStyleConfig;
-  drawer?: ComponentStyleConfig;
+  drawer?: DrawerConfig;
  calendar?: ComponentStyleConfig;
  carousel?: ComponentStyleConfig;
  cascader?: ComponentStyleConfig;
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -120,7 +120,7 @@ const {
 | datePicker | Set datePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` and `styles`: 5.10.0 |
 | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -24,6 +24,7 @@ import defaultSeedToken from '../theme/themes/seed';
 import type {
  BadgeConfig,
  ButtonConfig,
+  DrawerConfig,
  ComponentStyleConfig,
  ConfigConsumerProps,
  CSPConfig,
@ -159,7 +160,7 @@ export interface ConfigProviderProps {
  cascader?: ComponentStyleConfig;
  collapse?: ComponentStyleConfig;
  divider?: ComponentStyleConfig;
-  drawer?: ComponentStyleConfig;
+  drawer?: DrawerConfig;
  typography?: ComponentStyleConfig;
  skeleton?: ComponentStyleConfig;
  spin?: ComponentStyleConfig;
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -122,7 +122,7 @@ const {
 | datePicker | 设置 DatePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0 |
 | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
--- a/components/drawer/DrawerPanel.tsx
+++ b/components/drawer/DrawerPanel.tsx
@ -2,6 +2,23 @@ import classNames from 'classnames';
 import type { DrawerProps as RCDrawerProps } from 'rc-drawer';
 import * as React from 'react';
 import useClosable from '../_util/hooks/useClosable';
+import { ConfigContext } from '../config-provider';
+
+export interface DrawerClassNames {
+  header?: string;
+  body?: string;
+  footer?: string;
+  mask?: string;
+  content?: string;
+}
+
+export interface DrawerStyles {
+  header?: React.CSSProperties;
+  body?: React.CSSProperties;
+  footer?: React.CSSProperties;
+  mask?: React.CSSProperties;
+  content?: React.CSSProperties;
+}

 export interface DrawerPanelProps {
  prefixCls: string;
@ -22,10 +39,15 @@ export interface DrawerPanelProps {

  /** Wrapper dom node style of header and body */
  drawerStyle?: React.CSSProperties;
+  /** @deprecated Please use `styles.header` instead */
  headerStyle?: React.CSSProperties;
+  /** @deprecated Please use `styles.body` instead */
  bodyStyle?: React.CSSProperties;
+  /** @deprecated Please use `styles.footer` instead */
  footerStyle?: React.CSSProperties;
  children?: React.ReactNode;
+  classNames?: DrawerClassNames;
+  styles?: DrawerStyles;
 }

 const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
@ -42,7 +64,10 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
    bodyStyle,
    footerStyle,
    children,
+    classNames: drawerClassNames,
+    styles: drawerStyles,
  } = props;
+  const { drawer: drawerContext } = React.useContext(ConfigContext);

  const customCloseIconRender = React.useCallback(
    (icon: React.ReactNode) => (
@ -66,10 +91,19 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
    }
    return (
      <div
-        style={headerStyle}
-        className={classNames(`${prefixCls}-header`, {
-          [`${prefixCls}-header-close-only`]: mergedClosable && !title && !extra,
-        })}
+        style={{
+          ...drawerContext?.styles?.header,
+          ...headerStyle,
+          ...drawerStyles?.header,
+        }}
+        className={classNames(
+          `${prefixCls}-header`,
+          {
+            [`${prefixCls}-header-close-only`]: mergedClosable && !title && !extra,
+          },
+          drawerContext?.classNames?.header,
+          drawerClassNames?.header,
+        )}
      >
        <div className={`${prefixCls}-header-title`}>
          {mergedCloseIcon}
@ -86,7 +120,18 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
    }
    const footerClassName = `${prefixCls}-footer`;
    return (
-      <div className={footerClassName} style={footerStyle}>
+      <div
+        className={classNames(
+          footerClassName,
+          drawerContext?.classNames?.footer,
+          drawerClassNames?.footer,
+        )}
+        style={{
+          ...drawerContext?.styles?.footer,
+          ...footerStyle,
+          ...drawerStyles?.footer,
+        }}
+      >
        {footer}
      </div>
    );
@ -95,7 +140,18 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
  return (
    <div className={`${prefixCls}-wrapper-body`} style={drawerStyle}>
      {headerNode}
-      <div className={`${prefixCls}-body`} style={bodyStyle}>
+      <div
+        className={classNames(
+          `${prefixCls}-body`,
+          drawerClassNames?.body,
+          drawerContext?.classNames?.body,
+        )}
+        style={{
+          ...drawerContext?.styles?.body,
+          ...bodyStyle,
+          ...drawerStyles?.body,
+        }}
+      >
        {children}
      </div>
      {footerNode}
--- a/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
+++ b/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
@ -102,6 +102,233 @@ Array [

 exports[`renders components/drawer/demo/basic-right.tsx extend context correctly 2`] = `[]`;

+exports[`renders components/drawer/demo/classNames.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+  >
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          ConfigProvider
+        </span>
+      </button>
+    </div>
+  </div>,
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask acss-c0hvaj"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper"
+      style="width: 378px;"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content acss-1g5mw59"
+        role="dialog"
+        style="box-shadow: -10px 0 10px #666;"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header acss-1l0wu1y"
+            style="border-bottom: 1px solid #1677ff;"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <button
+                aria-label="Close"
+                class="ant-drawer-close"
+                type="button"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class="ant-drawer-title"
+              >
+                Basic Drawer
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body acss-pgpe64"
+            style="font-size: 16px;"
+          >
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+          </div>
+          <div
+            class="ant-drawer-footer acss-r4s437"
+            style="border-top: 1px solid #d9d9d9;"
+          >
+            Footer
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask acss-c0hvaj"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper"
+      style="width: 378px;"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content acss-1g5mw59"
+        role="dialog"
+        style="box-shadow: -10px 0 10px #666;"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header acss-1l0wu1y"
+            style="border-bottom: 1px solid #1677ff;"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <button
+                aria-label="Close"
+                class="ant-drawer-close"
+                type="button"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class="ant-drawer-title"
+              >
+                Basic Drawer
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body acss-pgpe64"
+            style="font-size: 16px;"
+          >
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+            <p>
+              Some contents...
+            </p>
+          </div>
+          <div
+            class="ant-drawer-footer acss-r4s437"
+            style="border-top: 1px solid #d9d9d9;"
+          >
+            Footer
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>,
+]
+`;
+
+exports[`renders components/drawer/demo/classNames.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/drawer/demo/component-token.tsx extend context correctly 1`] = `
 <div
  style="padding: 32px; background: rgb(230, 230, 230);"
--- a/components/drawer/tests/snapshots/demo.test.ts.snap
+++ b/components/drawer/tests/snapshots/demo.test.ts.snap
@ -11,6 +11,37 @@ exports[`renders components/drawer/demo/basic-right.tsx correctly 1`] = `
 </button>
 `;

+exports[`renders components/drawer/demo/classNames.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Open
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        ConfigProvider
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders components/drawer/demo/component-token.tsx correctly 1`] = `
 <div
  style="padding:32px;background:#e6e6e6"
--- a/components/drawer/demo/classNames.md
+++ b/components/drawer/demo/classNames.md
@ -0,0 +1,7 @@
+## zh-CN
+
+通过 `classNames` 属性设置抽屉内部区域（header、body、footer、mask、wrapper）的 `className`。
+
+## en-US
+
+Set the `className` of the build-in module (header, body, footer, mask, wrapper) of the drawer through the `classNames`.
--- a/components/drawer/demo/classNames.tsx
+++ b/components/drawer/demo/classNames.tsx
@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { Button, ConfigProvider, Drawer, Space } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import type { DrawerClassNames, DrawerStyles } from '../DrawerPanel';
+
+const useStyle = createStyles(({ token }) => ({
+  'my-drawer-body': {
+    background: token['blue-1'],
+  },
+  'my-drawer-mask': {
+    boxShadow: `inset 0 0 15px #fff`,
+  },
+  'my-drawer-header': {
+    background: token.green1,
+  },
+  'my-drawer-footer': {
+    color: token.colorPrimary,
+  },
+  'my-drawer-content': {
+    borderLeft: '2px dotted #333',
+  },
+}));
+
+const App: React.FC = () => {
+  const [open, setOpen] = useState([false, false]);
+  const { styles } = useStyle();
+  const token = useTheme();
+
+  const toggleDrawer = (idx: number, target: boolean) => {
+    setOpen((p) => {
+      p[idx] = target;
+      return [...p];
+    });
+  };
+
+  const classNames: DrawerClassNames = {
+    body: styles['my-drawer-body'],
+    mask: styles['my-drawer-mask'],
+    header: styles['my-drawer-header'],
+    footer: styles['my-drawer-footer'],
+    content: styles['my-drawer-content'],
+  };
+
+  const drawerStyles: DrawerStyles = {
+    mask: {
+      backdropFilter: 'blur(10px)',
+    },
+    content: {
+      boxShadow: '-10px 0 10px #666',
+    },
+    header: {
+      borderBottom: `1px solid ${token.colorPrimary}`,
+    },
+    body: {
+      fontSize: token.fontSizeLG,
+    },
+    footer: {
+      borderTop: `1px solid ${token.colorBorder}`,
+    },
+  };
+
+  return (
+    <>
+      <Space>
+        <Button type="primary" onClick={() => toggleDrawer(0, true)}>
+          Open
+        </Button>
+        <Button type="primary" onClick={() => toggleDrawer(1, true)}>
+          ConfigProvider
+        </Button>
+      </Space>
+      <Drawer
+        title="Basic Drawer"
+        placement="right"
+        footer="Footer"
+        onClose={() => toggleDrawer(0, false)}
+        open={open[0]}
+        classNames={classNames}
+        styles={drawerStyles}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Drawer>
+      <ConfigProvider
+        drawer={{
+          classNames,
+          styles: drawerStyles,
+        }}
+      >
+        <Drawer
+          title="Basic Drawer"
+          placement="right"
+          footer="Footer"
+          onClose={() => toggleDrawer(1, false)}
+          open={open[1]}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Drawer>
+      </ConfigProvider>
+    </>
+  );
+};
+
+export default App;
--- a/components/drawer/demo/form-in-drawer.tsx
+++ b/components/drawer/demo/form-in-drawer.tsx
@ -25,7 +25,11 @@ const App: React.FC = () => {
        width={720}
        onClose={onClose}
        open={open}
-        bodyStyle={{ paddingBottom: 80 }}
+        styles={{
+          body: {
+            paddingBottom: 80,
+          },
+        }}
        extra={
          <Space>
            <Button onClick={onClose}>Cancel</Button>
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -30,6 +30,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 <code src="./demo/user-profile.tsx">Preview drawer</code>
 <code src="./demo/multi-level-drawer.tsx">Multi-level drawer</code>
 <code src="./demo/size.tsx">Preset size</code>
+<code src="./demo/classNames.tsx">Customize className for build-in module</code>
 <code src="./demo/config-provider.tsx" debug>ConfigProvider</code>
 <code src="./demo/no-mask.tsx" debug>No mask</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
@ -46,14 +47,14 @@ Common props ref：[Common props](/docs/react/common-props)
 | --- | --- | --- | --- | --- |
 | autoFocus | Whether Drawer should get focused after open | boolean | true | 4.17.0 |
 | afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - |  |
-| bodyStyle | Style of the drawer content part | CSSProperties | - |  |
 | className | Config Drawer Panel className. Use `rootClassName` if want to config top dom style | string | - |  |
+| classNames | Config Drawer build-in module's className | `header?: string; body?: string; footer?: string; mask?: string; wrapper?: string;` | - |  |
+| styles | onfig Drawer build-in module's style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
 | closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | &lt;CloseOutlined /> |  |
 | contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - |  |
 | destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
 | extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
 | footer | The footer for Drawer | ReactNode | - |  |
-| footerStyle | Style of the drawer footer part | CSSProperties | - |  |
 | forceRender | Pre-render Drawer component forcibly | boolean | false |  |
 | getContainer | mounted node and display window for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
 | headerStyle | Style of the drawer header part | CSSProperties | - |  |
@ -61,7 +62,6 @@ Common props ref：[Common props](/docs/react/common-props)
 | keyboard | Whether support press esc to close | boolean | true |  |
 | mask | Whether to show mask or not | boolean | true |  |
 | maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true |  |
-| maskStyle | Style for Drawer's mask element | CSSProperties | {} |  |
 | placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` |  |
 | push | Nested drawers push behavior | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
 | rootStyle | Style of wrapper element which **contains mask** compare to `style` | CSSProperties | - |  |
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@ -12,7 +12,7 @@ import { NoFormStyle } from '../form/context';
 // CSSINJS
 import { NoCompactStyle } from '../space/Compact';
 import { usePanelRef } from '../watermark/context';
-import type { DrawerPanelProps } from './DrawerPanel';
+import type { DrawerClassNames, DrawerPanelProps, DrawerStyles } from './DrawerPanel';
 import DrawerPanel from './DrawerPanel';
 import useStyle from './style';

@ -36,6 +36,8 @@ export interface DrawerProps extends RcDrawerProps, Omit<DrawerPanelProps, 'pref
  visible?: boolean;
  /** @deprecated Please use `afterOpenChange` instead */
  afterVisibleChange?: (open: boolean) => void;
+  classNames?: DrawerClassNames;
+  styles?: DrawerStyles;
 }

 const defaultPushState: PushState = { distance: 180 };
@ -93,6 +95,9 @@ const Drawer: React.FC<DrawerProps> & {
    [
      ['visible', 'open'],
      ['afterVisibleChange', 'afterOpenChange'],
+      ['headerStyle', 'styles.header'],
+      ['bodyStyle', 'styles.body'],
+      ['footerStyle', 'styles.footer'],
    ].forEach(([deprecatedName, newName]) => {
      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
    });
@ -148,6 +153,20 @@ const Drawer: React.FC<DrawerProps> & {
          maskMotion={maskMotion}
          motion={panelMotion}
          {...rest}
+          classNames={{
+            mask: classNames(rest.classNames?.mask, drawer?.classNames?.mask),
+            content: classNames(rest.classNames?.content, drawer?.classNames?.content),
+          }}
+          styles={{
+            mask: {
+              ...rest.styles?.mask,
+              ...drawer?.styles?.mask,
+            },
+            content: {
+              ...rest.styles?.content,
+              ...drawer?.styles?.content,
+            },
+          }}
          open={open ?? visible}
          mask={mask}
          push={push}
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -29,6 +29,7 @@ demo:
 <code src="./demo/user-profile.tsx">信息预览抽屉</code>
 <code src="./demo/multi-level-drawer.tsx">多层抽屉</code>
 <code src="./demo/size.tsx">预设宽度</code>
+<code src="./demo/classNames.tsx">自定义内部样式</code>
 <code src="./demo/config-provider.tsx" debug>ConfigProvider</code>
 <code src="./demo/no-mask.tsx" debug>无遮罩</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
@ -45,22 +46,20 @@ demo:
 | --- | --- | --- | --- | --- |
 | autoFocus | 抽屉展开后是否将焦点切换至其 Dom 节点 | boolean | true | 4.17.0 |
 | afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - |  |
-| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |  |
 | className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - |  |
+| classNames | 配置抽屉内置模块的 className | `header?: string; body?: string; footer?: string; mask?: string; wrapper?: string;` | - |  |
+| styles | 配置抽屉内置模块的 style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
 | closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | &lt;CloseOutlined /> |  |
 | contentWrapperStyle | 可用于设置 Drawer 包裹内容部分的样式 | CSSProperties | - |  |
 | destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |  |
 | extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
 | footer | 抽屉的页脚 | ReactNode | - |  |
-| footerStyle | 抽屉页脚部件的样式 | CSSProperties | - |  |
 | forceRender | 预渲染 Drawer 内元素 | boolean | false |  |
 | getContainer | 指定 Drawer 挂载的节点，**并在容器内展现**，`false` 为挂载在当前位置 | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
-| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |  |
 | height | 高度，在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 378 |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
 | mask | 是否展示遮罩 | boolean | true |  |
 | maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
-| maskStyle | 遮罩样式 | CSSProperties | {} |  |
 | placement | 抽屉的方向 | `top` \| `right` \| `bottom` \| `left` | `right` |  |
 | push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
 | rootStyle | 可用于设置 Drawer 最外层容器的样式，和 `style` 的区别是作用节点包括 `mask` | CSSProperties | - |  |
--- a/package.json
+++ b/package.json
@ -127,7 +127,7 @@
    "rc-checkbox": "~3.1.0",
    "rc-collapse": "~3.7.1",
    "rc-dialog": "~9.3.3",
-    "rc-drawer": "~6.4.1",
+    "rc-drawer": "~6.5.2",
    "rc-dropdown": "~4.1.0",
    "rc-field-form": "~1.38.1",
    "rc-image": "~7.3.0",