Мобильная версия
В настоящее время я разрабатываю приложение React и столкнулся с проблемой выравнивания компонентов внутри компонента Material-UI AppBar. Моя цель — добиться плавного и четкого выравнивания трех важнейших компонентов: изображения логотипа, заголовка и кнопки входа.
Navbar.js
import { AppBar, Typography, Toolbar, Avatar, Button, Box,Container } from "@mui/material"; импортировать React из «реагировать»; импортировать {ссылку} из 'реагировать-маршрутизатор-дом' импортировать useStyles из './styles' импортировать воспоминания из '../../images/memories.png' const Navbar = () => { константные классы = useStyles() константный пользователь = ноль; возвращаться ( //
Блог о путешествиях {пользователь ? ( {user.result.name.charAt(0)} {user.result.name Выход ) : ( Войти )} ) } экспортировать панель навигации по умолчанию
Стили.js
import { makeStyles } из "@mui/styles"; импортировать { useTheme } из '@mui/material/styles'; импортировать { deepPurple } из "@mui/material/colors"; экспортировать по умолчанию makeStyles(() => ({ AppBar: { границаРадиус: 15, поле: '30px 0', дисплей: «гибкий», flexDirection: 'строка', justifyContent: 'пространство между', //вертикальное выравнивание: 'средний', alignItems: 'центр', отступ: '10px 50px', }, заголовок: { цвет: 'rgba(0,183,255, 1)', textDecoration: 'нет', }, изображение: { маржаLeft: '15px', }, панель инструментов: { дисплей: «гибкий», flexDirection: 'строка', justifyContent: 'гибкий конец', alignItems: 'центр' // ширина: '400 пикселей', }, профиль: { дисплей: «гибкий», justifyContent: 'пространство между', ширина: '400 пикселей', разрыв: '15px', }, имя пользователя: { дисплей: «гибкий», alignItems: 'центр', }, брендКонтейнер: { дисплей: «гибкий», alignItems: 'центр', }, фиолетовый: { цвет: useTheme().palette.getContrastText(deepPurple[500]), Цвет фона: глубокий фиолетовый [500], }, }));
