如何在 Material-UI AppBar 左侧显示图片，但保留 "hamburger" 菜单？

Question

我想在 Material-UI AppBar 的左侧显示图像，但保留 "hamburger" 菜单并在其右侧显示图像.

可能吗？我可以使用

在左侧添加图像

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

但是，替换了 "hamburger" 菜单，这对我没有用。

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

Answer 1

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

类似

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

工作pen

希望对您有所帮助！

Answer 2

在material ui 4.3.2中，AppBar没有'title'道具。所以要添加徽标请尝试以下方法。

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

使用css 限制徽标大小。即

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

Answer 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>

如何在 Material-UI AppBar 左侧显示图片，但保留 "hamburger" 菜单？

How do I display an image on left of Material-UI AppBar, but retain the "hamburger" menu?

appbar

reactjs

material-ui