时间戳

首页 > 解决方案 > Material-UI Drawer：如何在特定的 div 中放置抽屉

reactjs - Material-UI Drawer：如何在特定的 div 中放置抽屉

问题描述

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

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

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

标签： reactjsmaterial-ui

解决方案

下面的代码对我有用。它使用 MUI 文档中首选的一次性样式方法。过渡无需任何额外调整即可工作。当然，请确保您在 DOM 树中有一个“相对”元素。

<Drawer
  sx={{
    '& .MuiDrawer-root': {
        position: 'absolute'
    },
    '& .MuiPaper-root': {
        position: 'absolute'
    },
  }}
>
</Drawer>

推荐阅读