Material-UI Drawer：如何在特定 div 中定位抽屉

Question

我正在使用Material-UI React Drawer。有没有办法让抽屉限制在页面的特定部分而不是占据整个窗口？我试过给根组件一个绝对位置而不是固定位置，但这不会改变抽屉的位置。

<div className="confirmation-drawer">
   <Drawer
       anchor="top" 
       open={state.top} 
       onClose={toggleDrawer('top', false)}>
      <!-- Drawer content goes here -->
    </Drawer>
</div>

我需要.confirmation-drawerdiv内的抽屉而不是整个页面。任何帮助将不胜感激。

Answer 1

尝试这个：

import {styled, Drawer as MuiDrawer} from '@mui/material'

const Drawer = styled(MuiDrawer)({
    position: "relative", //imp
    width: 240, //drawer width
    "& .MuiDrawer-paper": {
      width: 240, //drawer width
      position: "absolute", //imp
      transition: "none !important"
    }
})

如果您想要过渡，请使用折叠。

<Collapse orientation='horizontal' in={open} >
 <Box> ... </Box>
</Collapse>

Answer 2

Drawer 组件是一个导航菜单组件，旨在覆盖应用程序而不是嵌套在容器内。它始终会出现在您的其他内容之上。

如果您正在寻找一个可以隐藏信息和其他交互式组件的动态元素，您可能需要查看 MUI 中的 Accordion 组件。

https://material-ui.com/api/accordion/

这将允许您拥有一个类似“抽屉”的小元素，其他组件可以隐藏在其中。