how can i set a border radius in dialogue material ui? this image is pop up dialogue that represent a button. i want to set border radius on this pop up dialogue for styling. i try to insert borderRadius in sx, but it doesn`t work

here`s my code

          <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
                  onm ouseLeave={() => setOpen(null)}
                  >
                  
                  <Button
                    sx={{
                      width:"100%",
                      borderRadius:10,
                      "&:hover":{
                        //border: "1px solid #00FF00",
                        //color: "gray",
                        backgroundColor: "white",

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

          </Dialog>

CodePudding user response：

Assuming that the goal is to set border radius for the Dialog modal, since this component internally uses Paper for the modal content, perhaps try pass a sx style in the property PaperProps to style the modal.

Tested below example in here: stackblitz

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