css - 如何在 mui reactjs 的抽屉外显示头像图像？

Question

我试图在侧边栏边界线之外显示头像图像曲线。

我以 mui v5 中的持久抽屉为例，这是代码框链接

我的目标是如下

在此示例中，我的抽屉样式如下：

<Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          //position: "relative",
          "& .MuiDrawer-paper": {
            width: drawerWidth,
            boxSizing: "border-box"
          }
        }}
        variant="persistent"
        anchor="left"
        open={open}
      >

以及抽屉标题内的头像样式如下：

<Avatar
  alt="test"
  src="./test.jpg"
  sx={{
    //position: "absolute",
    width: "120px",
    height: "120px",
    marginLeft: "150px"
  }}
/>

我怎样才能达到这样的风格？请帮助我

标签： cssreactjsflexboxreact-hooksmaterial-ui

Answer 1

添加以下样式

<Drawer
  sx={{
    "& .MuiDrawer-paper": {
      position: "relative",
      overflowY: "visible"
    },
  }}
>

<Avatar
  sx={{
    position: "absolute",
    top: 20,
    right: -60,
  }}
/>