/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/customization/creating-themed-components/StatSlots.js
57 строк
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'; const StatRoot = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(0.5), padding: theme.spacing(3, 4), backgroundColor: theme.palette.background.paper, borderRadius: theme.shape.borderRadius, boxShadow: theme.shadows[2], letterSpacing: '-0.025em', fontWeight: 600, ...theme.applyStyles('dark', { backgroundColor: 'inherit', }), })); const StatValue = styled('div')(({ theme }) => ({ ...theme.typography.h3, })); const StatUnit = styled('div')(({ theme }) => ({ ...theme.typography.body2, color: theme.palette.text.secondary, ...theme.applyStyles('dark', { color: 'inherit', }), })); const Label = styled('div')(({ theme }) => ({ borderRadius: '2px', padding: theme.spacing(0, 1), color: 'white', position: 'absolute', ...theme.typography.body2, fontSize: '0.75rem', fontWeight: 500, backgroundColor: '#ff5252', })); export default function StatSlots() { return ( <StatRoot sx={{ outline: '1px solid #ff5252', outlineOffset: 4, position: 'relative' }} > <StatValue sx={{ outline: '1px solid #ff5252', position: 'relative' }}> 19,267 <Label sx={{ right: 0, top: 4, transform: 'translateX(100%)' }}>value</Label> </StatValue> <StatUnit sx={{ outline: '1px solid #ff5252', position: 'relative' }}> Active users / month <Label sx={{ right: 0, top: 2, transform: 'translateX(100%)' }}>unit</Label> </StatUnit> <Label sx={{ left: -4, top: 4, transform: 'translateX(-100%)' }}>root</Label> </StatRoot> ); }