Material UI的Menu组件该怎么更改圆角大小呢？

Question

如图，我尝试设置Menu组件的圆角大小，属性设置如下

但是在Menu的MenuListProps属性里设置borderRadius会有问题，内部虽然有了圆角，但是外部框的白底还在，如下图

查阅Material UI的文档没有找到具体设置的方式，有没有大佬了解该组件呢？谢谢

Answer 1

使用slotProps写法

import { Menu } from '@/components/ui/menu'
import { useState } from 'react'
import MenuItem from '@mui/material/MenuItem'

const MenuDemo = () => {
  const [open, setOpen] = useState(false)
  const anchorEl = null; // 请根据实际情况设置 anchorEl

  return (
    <Menu
      id="basic-menu"
      open={open}
      onClose={() => setOpen(false)}
      autoFocus={false}
      anchorEl={anchorEl}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "left"
      }}
      sx={{
        mt: "5px",
      }}
      slotProps={{
        paper: {
          style: {
            borderRadius: "20px",
            backgroundColor: "transparent",
            overflow: "hidden"
          },
        },
        list: {
          style: {
            padding: "10px 7px",
            borderRadius: "20px",
            backgroundColor: "rgb(67, 66, 78)",
            backdropFilter: "blur(2px)",
            color: "#A0A0A0"
          },
          "aria-labelledby": "basic-button",
          onMouseLeave: () => setOpen(false),
        },
      }}
    >
      <MenuItem>选项1</MenuItem>
      <MenuItem>选项2</MenuItem>
      <MenuItem>选项3</MenuItem>
    </Menu>
  )
}

export default MenuDemo

  

使用styled components写法

import { Menu } from '@/components/ui/menu'

const MenuDemo = () => {
  const [open, setOpen] = useState(false)
  
  return (
    <Menu
      id="basic-menu"
      open={open}
      onClose={() => setOpen(false)}
      autoFocus={false}
      anchorEl={anchorEl}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "left"
      }}
      sx={{
        mt: "5px",
        "& .MuiPaper-root": {  // 这里设置外层Paper组件的样式
          borderRadius: "20px",
          backgroundColor: "transparent",
          overflow: "hidden"
        },
        "& .MuiMenu-list": {  // 这里设置内层Menu list的样式
          padding: "10px 7px",
          borderRadius: "20px",
          backgroundColor: "rgb(67, 66, 78)",
          backdropFilter: "blur(2px)",
          color: "#A0A0A0"
        }
      }}
      MenuListProps={{
        "aria-labelledby": "basic-button",
        onMouseLeave: () => setOpen(false),
      }}
    >
      <MenuItem>选项1</MenuItem>
      <MenuItem>选项2</MenuItem>
      <MenuItem>选项3</MenuItem>
    </Menu>
  )
}

export default MenuDemo