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

Posted 2023-03-06

【中文标题】如何使文本出现在 mui AppBar/Toolbar 组件的右侧？

【英文标题】：How to make text go on right side of mui AppBar/Toolbar component?

【发布时间】：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的版本吗？

【参考方案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