控制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

我将 go 与makeStyles帮助您自定义 Material-UI 的内置组件。 从文档（在此处进一步阅读： makeStyles ）：

使用钩子模式将样式表与 function 组件链接。 此挂钩可用于 function 组件。 文档经常将此返回的钩子称为 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>

另外只是检查了文档，我什至没有找到任何相关的属性，所以我会用建议的自定义解决方案 go 。

Answer 3

您可以将类属性添加到组件。 使用该 class 定义一个 css 文件并在那里更改宽度。

material-ui 还带来了另一种方法，使用内联 styles 和 useStyles 和 makeStyles。 检查 material-ui 文档。

Answer 4

在 MUIv5 中，有一种直接的方法可以通过将 PaperProps 参数传递给菜单来处理此问题（菜单从 Popover 继承 arguments，此处有文档说明）。

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

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

Answer 5

当前接受的答案针对菜单中的每个 div，这在我的情况下并不理想。 以下对我有用：

const useStyles = makeStyles((theme: Theme) => {
  return createStyles({
    menuRoot: {
      minWidth: "25vw",
    },
  });
});

export default function CustomMenu(props) {
  const classes = useStyles();

  return (
    <Menu
      id="simple-menu"
      anchorEl={anchorEl}
      keepMounted
      open={Boolean(anchorEl)}
      onClose={handleClose}
      transformOrigin={{
        vertical: "bottom",
        horizontal: "left",
      }}
      classes={{
        paper: classes.menuRoot,
      }}
    >
      ...
    </Menu>
  );
}

Answer 6

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

import {  Button,  Menu, MenuItem } from "@material-ui/core";
import React, { useState } from "react";
import style from "./filterBar.module.scss";


const Filterbar = () => {

  const [openMenu, setOpenMenu] = useState(null);
  const handleMenu = () => {
    setOpenMenu(true);
  };

  const closeMenu = ()=>{
      setOpenMenu(false)
  }
  
  return (
    <div>
      <Button onClick={handleMenu}>Filter</Button>
      <Menu open={openMenu} onClose={closeMenu}>
        <MenuItem onClick={closeMenu} >

        <div style={{display:'flex', justifyContent:"space-between", width:"50vw"}}>
            <h6>Brand</h6>
            <h6>Color</h6>
            <h6>Price</h6>
        </div>

        </MenuItem>
      </Menu>
    </div>
  );
};

export default Filterbar;

Answer 7

假设我们有如下内容：

<Menu className={classes.menu} />
 <MenuItem onClick={handleClose}>Profile</MenuItem>
 <Divider component="li" / >
</Menu>

您可以通过以下方式固定宽度：

const useStyles = makeStyles<Theme>(() => ({
  menu: {
    '&  li': {
      maxWidth: '320px',
    },
  },
}));