Question

我是实体UI的新手，我创建了一个User图标和User name，但是我无法在它们之间留出空格。我尝试通过给p = {1}和m = {1}来尝试，但是没有用。谁能协助我在他们之间留出空间？

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";
import Avatar from "@material-ui/core/Avatar";
import Fade from "@material-ui/core/Fade";

export default function FadeMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button

        aria-controls="fade-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        <Avatar mx="auto">AJ</Avatar>
        Anthony Johnson
      </Button>

      <Menu
        id="fade-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        TransitionComponent={Fade}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

以下是代码：“ https://codesandbox.io/s/material-demo-7vvuy”

Answer 1

您在这里找到解决方法

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";
import Avatar from "@material-ui/core/Avatar";
import Fade from "@material-ui/core/Fade";

const styles = () => ({
  avatar: {
    marginRight: 15
  }
});

export default function FadeMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const {classes} = this.props;

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button

        aria-controls="fade-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        <Avatar mx="auto" className={classes.avatar}>AJ</Avatar>
        Anthony Johnson
      </Button>

      <Menu
        id="fade-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        TransitionComponent={Fade}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

使用className并将类作为道具传递。

作为参考，请使用https://material-ui.com/api/avatar/

如何在实质性用户界面中的用户图标和用户名之间留出空间？

1 个答案: