如何在 mui reactjs 的抽屉外显示头像图像？答案

【问题标题】：how can i show the avatar image outside the drawer in mui reactjs?如何在 mui reactjs 的抽屉外显示头像图像？
【发布时间】：2021-11-16 07:50:03
【问题描述】：

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

我以 mui v5 中的持久抽屉为例，这里是the codesandbox link

我的目标是如下

在这个例子中，我的抽屉样式如下：

<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"
  }}
/>

我怎样才能实现这样的风格？请帮我解决这个问题

【问题讨论】：

标签： css reactjs flexbox react-hooks material-ui

【解决方案1】：

除了将其位置设置为absolute 之外，您还需要将Avatar 的大小除以2，然后取反以将Avatar 的一半移出Drawer。看这个例子：

<Avatar
  sx={{
    position: "absolute",
    top: 40,
    right: -60 / 2, // half the avatar size. negate it to move half outsize
    width: 60,
    height: 60
  }}
  {...}
/>

【讨论】：

【解决方案2】：

添加以下样式

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

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

【讨论】：

感谢您的回答，但头像与抽屉一起变小，头像位于抽屉和 MuiAppBar+Content 主程序之间的中间。我想要抽屉里的头像，它的一部分漂浮在它外面的内容主上。
编辑top 和right 属性以获得所需的结果。
它有效。谢谢