如何在Material-UI AppBar左侧显示图像,但保留"汉堡包"菜单？

Question

我想在Material-UI AppBar的左侧显示一个图像,但保留"汉堡包"菜单并将图像放在右侧.

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

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

然而,这取代了"汉堡包"菜单,这对我没用.

我也尝试创建img一个孩子AppBar,但是将图像放在任何iconElementRight元素的右边.

Answer 1

这是MUI方式

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

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

Answer 2

只需将标记作为标题传递即可.Material-ui将节点作为标题

就像是

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

工作笔

希望这可以帮助!

Answer 3

在材料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,
  },
});