如何在对话材质ui中设置边框半径？

Question

如何在对话材质 ui 中设置边框半径？该图像是代表按钮的弹出对话框。我想在这个弹出对话框上设置边框半径以进行样式设置。我尝试在 sx 中插入 borderRadius，但它不起作用

这是我的代码

          <Dialog
            open={Boolean(open)}
           
            sx={{
              backdropFilter: "blur(5px) sepia(5%)",
            }}
            
            //onMouseOutCapture={()=> setOpen(false)}
              >

            <Popover
              open={Boolean(open)}
              anchorEl={open}
              anchorOrigin={{
                vertical: 'center',
                horizontal: 'left',
              }}
              transformOrigin={{
                vertical : 'center',
                horizontal : 'left',
              }}
              >
                
                <BoxContainer2
                  onMouseLeave={() => setOpen(null)}
                  >
                  
                  <Button
                    sx={{
                      width:"100%",
                      borderRadius:10,
                      "&:hover":{
                        //border: "1px solid #00FF00",
                        //color: "gray",
                        backgroundColor: "white",

                        //opacity: 0,
                      }
                    }}>
                    tes
                  </Button>
                
                </BoxContainer2>
              
                
            </Popover>

          </Dialog>

Answer 1

假设目标是设置Dialog模态框的边框半径，因为该组件在内部用于Paper模态框内容，也许可以尝试sx在属性中传递样式PaperProps来设置模态框的样式。

在这里测试了下面的示例：stackblitz

<Dialog
  open={Boolean(open)}
  sx={{
    backdropFilter: "blur(5px) sepia(5%)",
  }}
  //  Props passed to Paper (modal content)
  PaperProps={{ sx: { borderRadius: "50px" } }}
>
...

如果由于某种原因这不起作用，另一个选择可能是尝试设置嵌套类名称的样式.MuiDialog-paper，这也将针对Paper：

<Dialog
  open={Boolean(open)}
  sx={{
    backdropFilter: "blur(5px) sepia(5%)",
    //  Another option to style Paper
    "& .MuiDialog-paper": {
      borderRadius: "50px",
    },
  }}
>
...