如何在 Material-UI AppBar 左侧显示图像，但保留“汉堡”菜单？答案

【问题标题】：How do I display an image on left of Material-UI AppBar, but retain the "hamburger" menu?如何在 Material-UI AppBar 左侧显示图像，但保留“汉堡”菜单？
【发布时间】：2017-03-19 22:42:56
【问题描述】：

我想在 Material-UI AppBar 的左侧显示一个图像，但保留“汉堡”菜单并将图像放在其右侧。

有可能吗？我可以使用

在左侧添加图像

<AppBar title="My App"
        iconElementLeft = {<img src='header-logo.png' alt="Logo" />} />;

但是，它替换了“汉堡”菜单，这对我没有用处。

我还尝试创建一个img 作为AppBar 的子元素，但这会将图像放在任何iconElementRight 元素的右侧。

【问题讨论】：

一个相关的问题是，当您有汉堡菜单时，Material-UI 建议将徽标放在哪里？我发现了关于产品标志设计的讨论，但没有找到位置 (material.io/design/iconography/…)。当您在左侧有一个汉堡包，在右侧有一个个人资料图标时，似乎没有合适的位置放置图标。我可能会去，但它在用户点击汉堡后打开的抽屉上。

标签： reactjs material-ui appbar

【解决方案1】：

只需将您的标签作为标题传递。 Material-ui 会以一个节点为标题

类似

 <AppBar
    title={<img src="https://unsplash.it/40/40"/>}
  />

工作pen

希望这会有所帮助！

【讨论】：

不错。我很难做到，并使用 IconButton 重新创建了菜单。看来我明天会重构它。
这支笔好像坏了？
使用 TypeScript 时的问题。类型“元素”不可分配给类型“字符串”.ts(2322)

【解决方案2】：

在材质 ui 4.3.2 中，AppBar 没有“标题”道具。因此，要添加徽标，请尝试以下方法。

<AppBar color="inherit">
    <Toolbar>
        <img src="logo.png" alt="logo" className={classes.logo} />
      </Toolbar>
</AppBar>

使用 css 限制徽标大小。即

const useStyles = makeStyles({
  logo: {
    maxWidth: 160,
  },
});

【讨论】：

【解决方案3】：

这是 MUI 方式

import Logo from "../assets/logo.png";

<AppBar position="static">
    <Toolbar>
        <Box
            component="img"
            sx={{
            height: 64,
            }}
            alt="Your logo."
            src={Logo}
        />
...
    </Toolbar>
</AppBar>

【讨论】：