如何在Material-UI AppBar的左侧显示图像，但保留＆＃34;汉堡包＆＃34;菜单？

Question

我想在Material-UI AppBar的左侧显示图像，但要保留＆＃34;汉堡包＆＃34;菜单，并将图像放在右边。

有可能吗？我可以使用

将图像添加到左侧

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

然而，取代＆＃34;汉堡＆＃34;菜单，这对我没用。

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

Answer 1

只需将您的代码作为标题传递即可。 Material-ui将节点作为标题

像

这样的东西

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

工作pen

希望这有帮助！

Answer 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,
  },
});