如何使文本出现在 mui AppBar/Toolbar 组件的右侧？答案

【问题标题】：How to make text go on right side of mui AppBar/Toolbar component?如何使文本出现在 mui AppBar/Toolbar 组件的右侧？
【发布时间】：2021-12-10 01:23:01
【问题描述】：

如何使以下菜单栏相同但右侧有log out 按钮？

代码：

    <main>
      <AppBar>
        <Toolbar>
        <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/")}>
            Home
          </Typography> 
          <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/projects")}>
            Projects
          </Typography> 
          <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/team")}>
            Goals
          </Typography> 
          {!session &&
            <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/login")}>
              Log in
            </Typography> 
          }
          {session &&
            <Typography  variant="h6" className="text-lg cursor-pointer right-0" onClick={() => signOut()}>
              log out
            </Typography> 
          }
        </Toolbar>
      </AppBar>
      <Toolbar />
    </main>

我很累，因为过去 1.5 小时我一直在与这个错误的错误作斗争

【问题讨论】：

你使用的是material-ui 5的版本吗？

标签： css material-ui tailwind-css

【解决方案1】：

您可以像这样添加 div 并使用 justify-between 和 flex 在它们之间添加空格。

<main>
  <AppBar>
    <Toolbar>
       <div className="flex justify-between">
         <div>
          <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/")}>
        Home
      </Typography> 
      <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/projects")}>
        Projects
      </Typography> 
      <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/team")}>
        Goals
      </Typography> 
      {!session &&
        <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/login")}>
          Log in
        </Typography> 
      }
      </div>
      <div>
        {session &&
        <Typography  variant="h6" className="text-lg cursor-pointer right-0" onClick={() => signOut()}>
          log out
        </Typography> 
      }
      </div>
       </div>
    </Toolbar>
  </AppBar>
  <Toolbar />
</main>

【讨论】：

【解决方案2】：

只需将其添加到您的 CSS 中即可。它将选择您的<Toolbar> 中的最后一个<Typography>（在您的情况下是注销）并将其发送到最右侧。

Toolbar Typography:last-child {
  float: right;
}

【讨论】：

@ProPoop 请尝试上述方法，如果您有任何疑问/澄清，请告诉我。

【解决方案3】：

我的实现是利用 css flexbox。我用一个 Box 将这三个元素分组并在其上实现 CSS flexbox。

import React from "react";
import { AppBar, Box, Toolbar, Typography } from "@mui/material";

function App() {
  return (
    <AppBar>
      <Toolbar sx={{ display: "flex" }}>
        <Box sx={{ display: "flex", flex: "1 1 0" }}>
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/")}
          >
            Home
          </Typography>
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/projects")}
          >
            Projects
          </Typography>
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/team")}
          >
            Goals
          </Typography>
        </Box>
        {/* session */}
        {false && (
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/login")}
          >
            Log in
          </Typography>
        )}
        {/* lets assume that session is true */}
        {true && (
          <Typography
            variant="subtitle2"
            className="text-lg cursor-pointer right-0"
            // onClick={() => signOut()}
          >
            log out
          </Typography>
        )}
      </Toolbar>
    </AppBar>
  );
}

export default App;

您可以在代码框中与我自己的实现进行交互，只需点击here

【讨论】：