/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/paper/Elevation.js
46 строк
1 KB
Brijesh Bittu
[code-infra] Remove React import requirement for jsx (#47146)
29 окт 2025, 20:55
Не верифицирован
29 окт 2025, 20:55
6c9e82f
Код
Авторство
О чём код?
import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ ...theme.typography.body2, textAlign: 'center', color: theme.palette.text.secondary, height: 60, lineHeight: '60px', })); const darkTheme = createTheme({ palette: { mode: 'dark' } }); const lightTheme = createTheme({ palette: { mode: 'light' } }); export default function Elevation() { return ( <Box sx={{ flexGrow: 1 }}> <Grid container spacing={2}> {[lightTheme, darkTheme].map((theme, index) => ( <Grid key={index} size={6}> <ThemeProvider theme={theme}> <Box sx={{ p: 2, borderRadius: 2, bgcolor: 'background.default', display: 'grid', gridTemplateColumns: { md: '1fr 1fr' }, gap: 2, }} > {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => ( <Item key={elevation} elevation={elevation}> {`elevation=${elevation}`} </Item> ))} </Box> </ThemeProvider> </Grid> ))} </Grid> </Box> ); }