Material-UI中控制菜单组件的宽度

Question

我正在尝试实现一个带有登录表单的菜单项。它有效，但宽度太小。有没有办法改变它？我在文档中找不到任何关于它的内容。

import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

Answer 1

@norbitrial 答案可能会产生副作用。就我而言，我无法通过在菜单外单击来关闭菜单！

更好地使用：

<Menu
  ...
  PaperProps={{  
    style: {  
      width: 350,  
    },  
 }} 

Answer 2

在 MUIv5 中，有一种简单的方法可以通过将 PaperProps 参数传递给菜单来处理此问题（菜单继承了 Popover 的参数，这些参数在此处记录）。

因此，您可以创建一个 800px 宽的菜单，如下所示

<Menu PaperProps={{sx: {width: '800px'}}}>
   ...
</Menu>

Answer 3

我会选择makeStyles它来帮助您从 Material-UI 定制内置组件。从文档（在这里进一步阅读：makeStyles）：

使用钩子模式将样式表与函数组件链接起来。该钩子可以在函数组件中使用。文档通常称这个返回的钩子为useStyles。

对我有用的唯一解决方案如下：

import { makeStyles } from '@material-ui/core';

// ...

const useStyles = makeStyles({
    customWidth: {
        '& div': {
            // this is just an example, you can use vw, etc.
            width: '350px',
        }
    }
});

// ...

export default function SimpleMenu() {
   // ...
   const classes = useStyles();

   return (
      <Menu
         id="simple-menu"
         anchorEl={anchorEl}
         keepMounted
         open={Boolean(anchorEl)}
         onClose={handleClose}
         className={classes.customWidth}
       >
         <MenuItem onClick={handleClose}>Profile</MenuItem>
         <MenuItem onClick={handleClose}>My account</MenuItem>
         <MenuItem onClick={handleClose}>Logout</MenuItem>
       </Menu>

另外，刚刚检查了文档，我什至没有找到任何用于此目的的相关属性，因此我将采用建议的自定义解决方案。