web-dev-qa-db-ja.com

Material-UI AppBarの左側に画像を表示しながら、「ハンバーガー」メニューを保持するにはどうすればよいですか？

Material-UI AppBar の左側に画像を表示したいのですが、「ハンバーガー」メニューはそのままにして、その右側に画像を配置します。

出来ますか？を使用して左に画像を追加できます

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

ただし、これは「ハンバーガー」メニューに置き換わるものであり、私にとっては役に立ちません。

また、imgをAppBarの子として作成しようとしましたが、これにより画像がiconElementRight要素の右側に配置されます。

reactjsmaterial-uiappbar
8
dommer

タイトルとしてタグを渡すだけです。 Material-uiはノードをタイトルとして使用します

何かのようなもの

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

動作中 ペン

お役に立てれば！

11
Pranesh Ravi

マテリアル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,
  },
});
10
Vikas Kumar