/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/app-bar/ProminentAppBar.js
58 строк
2 KB
Brijesh Bittu
[code-infra] Remove React import requirement for jsx (#47146)
29 окт 2025, 20:55
Не верифицирован
29 окт 2025, 20:55
6c9e82f
Код
Авторство
О чём код?
import { styled } from '@mui/material/styles'; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Toolbar from '@mui/material/Toolbar'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import MenuIcon from '@mui/icons-material/Menu'; import SearchIcon from '@mui/icons-material/Search'; import MoreIcon from '@mui/icons-material/MoreVert'; const StyledToolbar = styled(Toolbar)(({ theme }) => ({ alignItems: 'flex-start', paddingTop: theme.spacing(1), paddingBottom: theme.spacing(2), // Override media queries injected by theme.mixins.toolbar '@media all': { minHeight: 128, }, })); export default function ProminentAppBar() { return ( <Box sx={{ flexGrow: 1 }}> <AppBar position="static"> <StyledToolbar> <IconButton size="large" edge="start" color="inherit" aria-label="open drawer" sx={{ mr: 2 }} > <MenuIcon /> </IconButton> <Typography variant="h5" noWrap component="div" sx={{ flexGrow: 1, alignSelf: 'flex-end' }} > MUI </Typography> <IconButton size="large" aria-label="search" color="inherit"> <SearchIcon /> </IconButton> <IconButton size="large" aria-label="display more actions" edge="end" color="inherit" > <MoreIcon /> </IconButton> </StyledToolbar> </AppBar> </Box> ); }