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

Question

I'm trying to implement a menu item with a login form in it. It works but the width is too small. Is there a way to change it? I couldn't find anything in the documentation about it.

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 answer could have side effects. In my case i can't close the menu by clicking outside it !

Better use:

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

Answer 2

I would go with makeStyles which helps you customize built in components from Material-UI. From the documentation (read further here: makeStyles ):

Link a style sheet with a function component using the hook pattern. This hook can be used in a function component. The documentation often calls this returned hook useStyles.

The only solution what was working for me is the following:

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>

Additionally just checked the documentation and I even did not find any related property for this purpose, so I would go with the suggested custom solution.

Answer 3

You can add classes property to component. Define a css file with that class and change the width there.

Also material-ui brings another way to do it with inline styles with useStyles and makeStyles. check material-ui documentation for that.

Answer 4

In MUIv5 there is a straightforward way to handle this by passing the PaperProps argument to menu (menu inherits the arguments from Popover which are documented here ).

Thus, you could create an 800px wide menu as follows

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

Answer 5

The current accepted answer targets every div inside the Menu, which was not ideal in my case. The following worked for me:

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

Control the width of menu component in 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

Assuming we have smth like the following:

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

You can fix width in the following way:

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