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

Question

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

可能吗？我可以使用在左侧添加图像

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

但是，这 取代 了“汉堡”菜单，这对我来说没用。

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

原文由 dommer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

就像是

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

工作 笔

希望这可以帮助！

原文由 Pranesh Ravi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

使用 css 来限制徽标大小。 IE

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

原文由 Vikas Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议