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

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

material-ui还为useStyles和makeStyles的内联样式带来了另一种方法。请查看material-ui文档。

Answer 3

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

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

Answer 4

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

假设我们有如下内容：

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

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

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

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

5 个答案: