跳到主要內容跳到主要內容
🚀 影響 Material UI 的 2025 年藍圖！參與最新的開發者調查

DrawerAPI

React Drawer 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

Import

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

閱讀關於最小化套件大小的指南，以瞭解差異。



當設定 variant="temporary" 時，Modal 元件的 props 可用。

Props

原生元件的 props 也可用。

名稱類型預設值描述
anchor'bottom'
| 'left'
| 'right'
| 'top'		'left'

抽屜將從哪一側出現。

childrennode-

元件的內容。

classesobject-

覆寫或擴展應用於元件的樣式。

請參閱下方 CSS 類別 API 以取得更多詳細資訊。

elevationinteger16

抽屜的海拔高度。

hideBackdropboolfalse

若為 true，則不渲染背景幕。

ModalPropsobject{}

應用於 Modal 元素的 Props。

onClosefunc-

當元件請求關閉時觸發的回呼。reason 參數可以選擇性地用於控制對 onClose 的回應。

簽名：function(event: object, reason: string) => void
  • event 回呼的事件來源。
  • reason 可以是："escapeKeyDown"、"backdropClick"。
openboolfalse

若為 true，則顯示元件。

PaperPropsobject{}

應用於 Paper 元素的 Props。

SlidePropsobject-

應用於 Slide 元素的 Props。

slotProps{ backdrop?: func
| object, docked?: func
| object, paper?: func
| object, root?: func
| object, transition?: func
| object }		{}

用於每個插槽內部的 props。

slots{ backdrop?: elementType, docked?: elementType, paper?: elementType, root?: elementType, transition?: elementType }{}

用於每個插槽內部的元件。

sxArray<func
| object
| bool>
| func
| object		-

系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面 以取得更多詳細資訊。

transitionDurationnumber
| { appear?: number, enter?: number, exit?: number }		{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }

轉場動畫的持續時間，以毫秒為單位。您可以為所有轉場動畫指定單一逾時，或使用物件個別指定。

variant'permanent'
| 'persistent'
| 'temporary'		'temporary'

要使用的變體。

ref 會轉發到根元素。

主題預設 props

您可以使用 MuiDrawer 透過主題 變更此元件的預設 props。

Slots

插槽名稱類別名稱預設元件描述
root.MuiDrawer-rootModal當變體為 temporary 時，用於根元件的元件。
backdropBackdrop用於 Modal 背景幕的元件。
docked.MuiDrawer-dockeddiv當變體為 permanent 或 persistent 時，用於根元素的元件。
paper.MuiDrawer-paperPaper用於 paper 的元件。
transitionSlide用於轉場動畫的元件。請遵循本指南以瞭解更多關於此元件需求的資訊。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的插槽。

類別名稱規則名稱描述
.MuiDrawer-anchorBottomanchorBottom若 anchor="bottom"，則應用於根元素的樣式。
.MuiDrawer-anchorLeftanchorLeft若 anchor="left"，則應用於根元素的樣式。
.MuiDrawer-anchorRightanchorRight若 anchor="right"，則應用於根元素的樣式。
.MuiDrawer-anchorTopanchorTop若 anchor="top"，則應用於根元素的樣式。
.MuiDrawer-modalmodal應用於 Modal 元件的樣式。
.MuiDrawer-paperAnchorBottompaperAnchorBottom若 anchor="bottom"，則應用於 Paper 元件的樣式。
.MuiDrawer-paperAnchorDockedBottompaperAnchorDockedBottom若 anchor="bottom" 且 variant 不是 "temporary"，則應用於 Paper 元件的樣式。
.MuiDrawer-paperAnchorDockedLeftpaperAnchorDockedLeft若 anchor="left" 且 variant 不是 "temporary"，則應用於 Paper 元件的樣式。
.MuiDrawer-paperAnchorDockedRightpaperAnchorDockedRight若 anchor="right" 且 variant 不是 "temporary"，則應用於 Paper 元件的樣式。
.MuiDrawer-paperAnchorDockedToppaperAnchorDockedTop若 anchor="top" 且 variant 不是 "temporary"，則應用於 Paper 元件的樣式。
.MuiDrawer-paperAnchorLeftpaperAnchorLeft若 anchor="left"，則應用於 Paper 元件的樣式。
.MuiDrawer-paperAnchorRightpaperAnchorRight若 anchor="right"，則應用於 Paper 元件的樣式。
.MuiDrawer-paperAnchorToppaperAnchorTop若 anchor="top"，則應用於 Paper 元件的樣式。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

原始碼

如果您在本頁中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。