#css #material-ui #tailwind-css
Вопрос:
Как сделать следующую строку меню такой же, но с 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 amp;amp;
<Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/login")}>
Log in
</Typography>
}
{session amp;amp;
<Typography variant="h6" className="text-lg cursor-pointer right-0" onClick={() => signOut()}>
log out
</Typography>
}
</Toolbar>
</AppBar>
<Toolbar />
</main>
Я очень устал, так как последние 1,5 часа боролся с этой дурацкой ошибкой
Комментарии:
1. Используете ли вы версию 5 material-ui ?
Ответ №1:
вы можете добавить такие дивы и использовать 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 amp;amp;
<Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/login")}>
Log in
</Typography>
}
</div>
<div>
{session amp;amp;
<Typography variant="h6" className="text-lg cursor-pointer right-0" onClick={() => signOut()}>
log out
</Typography>
}
</div>
</div>
</Toolbar>
</AppBar>
<Toolbar />
</main>
Ответ №2:
Просто добавьте это в свой CSS. Он выберет последнее <Typography>
(которое в вашем случае является выходом из системы) в вашем <Toolbar>
и отправит его в крайнюю правую часть.
Toolbar Typography:last-child {
float: right;
}
Комментарии:
1. @ProPoop пожалуйста, попробуйте подход, описанный выше, и дайте мне знать, если у вас возникнут какие-либо сомнения/ разъяснения.
Ответ №3:
Моя реализация заключается в использовании css flexbox. Я группирую три элемента с помощью коробки и внедряю в нее 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 amp;amp; (
<Typography
style={{ marginRight: 16 }}
variant="subtitle2"
className="text-lg cursor-pointer"
// onClick={() => redirect("/login")}
>
Log in
</Typography>
)}
{/* lets assume that session is true */}
{true amp;amp; (
<Typography
variant="subtitle2"
className="text-lg cursor-pointer right-0"
// onClick={() => signOut()}
>
log out
</Typography>
)}
</Toolbar>
</AppBar>
);
}
export default App;
Вы можете взаимодействовать с моей собственной реализацией в поле codesandbox, просто нажмите здесь