如何为Material UI中的Dialog弹窗设置圆角？

问题核心 #

你的代码存在两个关键问题导致圆角不生效：

• 组件嵌套错误：Dialog和Popover是独立的弹窗组件，不需要嵌套使用，这种写法会引发样式层级冲突，违背组件设计逻辑。
• 样式位置错误：你只给内部按钮加了圆角，但弹窗的容器（Popover自带的Paper组件）才是需要设置圆角的目标。

修复方案 #

1. 移除冗余的Dialog组件

直接使用Popover实现弹窗功能，无需嵌套Dialog。

2. 给Popover容器设置圆角

通过sx属性直接定位到Popover的默认弹窗容器（MuiPopover-paper类），或者给自定义容器BoxContainer2添加圆角并处理溢出。

修正后的代码 #

<Popover
  open={Boolean(open)}
  anchorEl={open}
  anchorOrigin={{
    vertical: 'center',
    horizontal: 'left',
  }}
  transformOrigin={{
    vertical: 'center',
    horizontal: 'left',
  }}
  // 直接给Popover的弹窗容器设置圆角
  sx={{
    '& .MuiPopover-paper': {
      borderRadius: 10, // 也可以用具体像素值如"20px"
    }
  }}
>
  <BoxContainer2
    onMouseLeave={() => setOpen(null)}
    // 可选：给自定义容器加圆角，配合overflow:hidden防止内容溢出
    sx={{ borderRadius: 10, overflow: 'hidden' }}
  >
    <Button
      sx={{
        width: "100%",
        borderRadius: 10,
        "&:hover": {
          backgroundColor: "white",
        }
      }}>
      tes
    </Button>
  </BoxContainer2>
</Popover>

补充说明 #

• 如果BoxContainer2是自定义组件，确保它没有覆盖圆角样式；若在该组件上设置圆角，记得加上overflow: hidden，避免内部元素的边角超出容器。
• 使用& .MuiPopover-paper是直接定位Material UI Popover的默认弹窗容器，能确保圆角样式不会被组件默认样式覆盖。

内容的提问来源于stack exchange，提问作者Tri Ako Nugroho