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

亚力山大

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

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>
  );
}

任意的

我可以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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。