/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/stack/ZeroWidthStack.tsx
44 строки
1 KB
Brijesh Bittu
[code-infra] Remove React import requirement for jsx (#47146)
29 окт 2025, 20:55
Не верифицирован
29 окт 2025, 20:55
6c9e82f
Код
Авторство
О чём код?
import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: (theme.vars ?? theme).palette.text.secondary, maxWidth: 400, ...theme.applyStyles('dark', { backgroundColor: '#1A2027', }), })); const message = `Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.`; export default function ZeroWidthStack() { return ( <Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3 }}> <Item sx={{ my: 1, mx: 'auto', p: 2 }}> <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}> <Avatar>W</Avatar> <Typography noWrap>{message}</Typography> </Stack> </Item> <Item sx={{ my: 1, mx: 'auto', p: 2 }}> <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}> <Stack> <Avatar>W</Avatar> </Stack> <Stack sx={{ minWidth: 0 }}> <Typography noWrap>{message}</Typography> </Stack> </Stack> </Item> </Box> ); }