CODEWITHSUNDEEP
cssreactjsmaterial-ui
Alexander
Alexander

Reputation: 1378

Control the width of menu component in Material-UI

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

Upvotes: 17

Views: 26943

Answers (8)

user1859295
user1859295

Reputation: 103

As of today, paperProps is deprecated. Better use slotProps and assign an object as value with a "paper" key

<Menu
  slotProps={{ paper: { sx: { width: 320 } } }}
  ...
>

Upvotes: 3

Peter Gerdes
Peter Gerdes

Reputation: 2988

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>

Upvotes: 5

mahieyin-rahmun
mahieyin-rahmun

Reputation: 1657

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

Upvotes: 2

wwwebman
wwwebman

Reputation: 2147

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

Upvotes: 0

Ali Raza
Ali Raza

Reputation: 1

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;

Upvotes: 0

abdelgrib
abdelgrib

Reputation: 1140

@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,  
    },  
 }}

Upvotes: 30

norbitrial
norbitrial

Reputation: 15166

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.

Upvotes: 4

Maximiliano Poggio
Maximiliano Poggio

Reputation: 1182

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.

Upvotes: 2

Related Questions