React： Material UI でヘッダーの右端にアイコンを表示する。

・参考：
・ReactのMaterial-UIで、右揃えの要素を作るには | Kanchiの雑記帳
・【初心者】#1 Reactの基礎とMaterial-UI使って綺麗に作ってみる #JavaScript - Qiita

・説明：

　<div style={{ flexGrow: 1 }}></div>

を使えば良い。具体的には下のコードのHeader.jsxを参照。

import React from "react";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";

const Header = () => {
  return (
    /* ヘッダーを上に固定*/
    <AppBar position="static">
      {/*Toolbarが青い線*/}
      <Toolbar>
        <Typography>ヘッダー</Typography>
        {/*右寄せ*/}
        <div style={{ flexGrow: 1 }}></div>
        <Typography>
          <AccountCircleIcon />
        </Typography>
      </Toolbar>
    </AppBar>
  );
};
export default Header;