/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/grid/NestedGridColumns.tsx
46 строк
1 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 Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: (theme.vars ?? theme).palette.text.secondary, ...theme.applyStyles('dark', { backgroundColor: '#1A2027', }), })); export default function NestedGridColumns() { return ( <Box sx={{ flexGrow: 1 }}> <Grid container spacing={2} columns={24}> <Grid size={8}> <Item>size=8/24</Item> </Grid> <Grid container size={16}> <Grid size={12}> <Item>nested size=12/24</Item> </Grid> <Grid size={12}> <Item>nested size=12/24</Item> </Grid> </Grid> <Grid size={8}> <Item>size=8/24</Item> </Grid> <Grid container columns={12} size={16}> <Grid size={6}> <Item>nested size=6/12</Item> </Grid> <Grid size={6}> <Item>nested size=6/12</Item> </Grid> </Grid> </Grid> </Box> ); }