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-drawer

div 内的抽屉，而不是整个页面。任何帮助将不胜感激。

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。

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

Answer 2

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

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

Answer 3

z-index

（在可能情况下为 1300），并为您希望位于顶部的组件设置更高的

z-index

。然后只需在抽屉内设置填充，以便所有内容都可见。正如我所说，这只是一种解决方法，但我希望它对某人有所帮助。

Answer 4

  const [open, setOpen] = useState(false);
  const containerRef = useRef(null);

  return (
    <Box
      ref={containerRef}
      sx={{
        width: "500px",
        height: "300px",
        border: "1px solid black",
        margin: "50px auto",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <p>This is the container for the drawer.</p>
      <Button onClick={() => setOpen(true)}>Open Drawer Inside</Button>

      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        anchor="left"
        variant="temporary"
        container={containerRef.current}
        ModalProps={{
          container: containerRef.current,
          disablePortal: true,
        }}
        sx={{ position: 'absolute', '& .MuiPaper-root': { position: 'absolute' }, }}
      >
        <div style={{ padding: 20 }}>
          <h4>Drawer Inside Container</h4>
          <Button onClick={() => setOpen(false)}>Close</Button>
        </div>
      </Drawer>
    </Box>

我通过使用参考文献来实现它。默认情况下，抽屉使用根 HTML 元素进行渲染。

要在容器中渲染它，Model 道具需要引用父容器并禁用门户。

父容器需要是相对的，绝对定位才能发挥作用。

Answer 5

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

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

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