Управление шириной компонента меню в 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

Я бы пошел с 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 2

Вы можете добавить свойство классов к компоненту. Определите CSS-файл с этим классом и измените его ширину.

Также Material-UI предлагает другой способ сделать это с помощью встроенных стилей с помощью useStyles и makeStyles. проверьте документацию по материалам для этого.