Reactjs 如何在材质UI中在用户图标和用户名之间留出空间？

我不熟悉MaterialUI，我创建了一个用户图标和用户名，但我无法在它们之间留出空间。我试着给出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>
  );
}

从“React”导入React；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Fade”导入淡入淡出；
导出默认函数FadeMenu（）{
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量开=布尔值（主播）；
const handleClick=事件=>{
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
返回(
“
给你一个解决方案


从“React”导入React；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Fade”导入淡入淡出；
常量样式=（）=>({
化身：{
marginRight:15
}
});
导出默认函数FadeMenu（）{
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量开=布尔值（主播）；
const{classes}=this.props；
const handleClick=事件=>{
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
返回(
AJ
安东尼-约翰逊
轮廓
我的帐户
注销
);
}