跳到内容跳到内容
🚀 影响 Joy UI 2025 年的路线图！参与最新的开发者调查

DrawerAPI

React Drawer 组件的 API 参考文档。了解此导出的模块的 props、CSS 和其他 API。

演示

Import

import Drawer from '@mui/joy/Drawer';
// or
import { Drawer } from '@mui/joy';

通过阅读关于最小化 bundle size 的指南，了解它们之间的区别。



导航抽屉（或“侧边栏”）为站点或应用程序功能（例如切换帐户）中的目标位置提供符合人体工程学的访问。

Props

原生组件的 Props 也可用。

名称类型默认描述
open*bool-

如果为 true，则组件显示。

anchor'bottom'
| 'left'
| 'right'
| 'top'		'left'

抽屉将从哪一侧出现。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'		'neutral'

组件的颜色。它支持对该组件有意义的主题颜色。

要了解如何添加您自己的颜色，请查看主题组件—扩展颜色。

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

containerHTML 元素
| func		-

HTML 元素或返回 HTML 元素的函数。container 将附加 portal children。
您还可以提供一个回调，该回调在 React 布局 effect 中调用。这允许您从 ref 设置容器，并使服务器端渲染成为可能。
默认情况下，它使用顶层文档对象的 body，因此大多数时候它只是 document.body。

disableAutoFocusboolfalse

如果为 true，则模态框在打开时不会自动将焦点转移到自身，并在关闭时将其替换为最后聚焦的元素。这也适用于任何具有 disableAutoFocus prop 的模态框子组件。
通常，不应将其设置为 true，因为它会降低辅助技术（如屏幕阅读器）访问模态框的便利性。

disableEnforceFocusboolfalse

如果为 true，则模态框在打开时不会阻止焦点离开模态框。
通常，不应将其设置为 true，因为它会降低辅助技术（如屏幕阅读器）访问模态框的便利性。

disableEscapeKeyDownboolfalse

如果为 true，则按 escape 键不会触发 onClose 回调。

disablePortalboolfalse

children 将位于父组件的 DOM 层次结构下。

disableRestoreFocusboolfalse

如果为 true，则模态框在隐藏或卸载后不会将焦点恢复到先前聚焦的元素。

disableScrollLockboolfalse

禁用滚动锁定行为。

hideBackdropboolfalse

如果为 true，则不渲染背景幕布。

invertedColorsboolfalse

如果为 true，则具有隐式 color prop 的子组件会反转其颜色以匹配组件的 variant 和 color。

onClosefunc-

当组件请求关闭时触发的回调。reason 参数可以选择用于控制对 onClose 的响应。

签名：function(event: object, reason: string) => void
  • event 回调的事件源。
  • reason 可以是："escapeKeyDown"、"backdropClick"、"closeClick"。
size'sm'
| 'md'
| 'lg'		'md'

组件的尺寸。

要了解如何向组件添加自定义尺寸，请查看主题组件—扩展尺寸。

slotProps{ backdrop?: func
| object, content?: func
| object, root?: func
| object }		{}

用于内部每个插槽的 props。

slots{ backdrop?: elementType, content?: elementType, root?: elementType }{}

用于内部每个插槽的组件。

有关更多详细信息，请参阅下面的Slots API。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'		'plain'

要使用的全局 variant。

要了解如何添加您自己的 variant，请查看主题组件—扩展 variant。

ref 被转发到根元素。

Slots

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称类名默认组件描述
root.MuiDrawer-root'div'渲染根元素的组件。
backdrop.MuiDrawer-backdrop'div'渲染背景幕布的组件。
content.MuiDrawer-content'div'渲染抽屉内容的组件。

CSS 类

这些类名对于使用 CSS 设置样式很有用。当触发特定状态时，它们会应用于组件的插槽。

类名规则名称描述
.MuiDrawer-colorContextcolorContext当颜色反转被触发时，应用于根元素的类名。
.MuiDrawer-colorDangercolorDanger如果 color="danger"，应用于根元素的类名。
.MuiDrawer-colorNeutralcolorNeutral如果 color="neutral"，应用于根元素的类名。
.MuiDrawer-colorPrimarycolorPrimary如果 color="primary"，应用于根元素的类名。
.MuiDrawer-colorSuccesscolorSuccess如果 color="success"，应用于根元素的类名。
.MuiDrawer-colorWarningcolorWarning如果 color="warning"，应用于根元素的类名。
.MuiDrawer-hiddenhidden当 open 为 false 时，应用于根元素的类名。
.MuiDrawer-sizeLgsizeLg如果 size="lg"，应用于根元素的类名。
.MuiDrawer-sizeMdsizeMd如果 size="md"，应用于根元素的类名。
.MuiDrawer-sizeSmsizeSm如果 size="sm"，应用于根元素的类名。
.MuiDrawer-variantOutlinedvariantOutlined如果 variant="outlined"，应用于根元素的类名。
.MuiDrawer-variantPlainvariantPlain如果 variant="plain"，应用于根元素的类名。
.MuiDrawer-variantSoftvariantSoft如果 variant="soft"，应用于根元素的类名。
.MuiDrawer-variantSolidvariantSolid如果 variant="solid"，应用于根元素的类名。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中找不到所需的信息，请考虑查看组件的实现以获取更多详细信息。