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

【问题标题】：Control the width of menu component in Material-UI在 Material-UI 中控制菜单组件的宽度
【发布时间】：2019-10-24 16:21:04
【问题描述】：

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

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

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

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

更好的使用：

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

【讨论】：

工作得很好，更干净，并且可能是实现这一目标的首选方式，而不是“接受”的答案。

【解决方案2】：

我会选择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>

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

【讨论】：

您的回答可能会导致一些无法预料的副作用，这不是 Material UI 推荐的设置大小的方式。 Abdellah GRIB 的答案应该是正确的答案

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

当前接受的答案针对菜单内的每个 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>
  );
}

【讨论】：

【解决方案5】：

在 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;

【讨论】：

【解决方案6】：

假设我们有如下内容：

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

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

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

【讨论】：