/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/system/getting-started/the-sx-prop/DynamicValues.tsx
38 строк
1019 B
Siriwat K
[docs] Migrate system props to `sx` prop (#42475)
05 июн 2024, 06:04
Не верифицирован
05 июн 2024, 06:04
6fe1242
Код
Авторство
О чём код?
import * as React from 'react'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; export default function DynamicValues() { const [color, setColor] = React.useState('#007fff'); return ( <Stack spacing={1} sx={{ alignItems: 'center' }}> <Typography component="label" variant="body2" sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }} > Pick a color to see a live preview <input type="color" value={color} onChange={(event) => setColor(event.target.value)} /> </Typography> <Box component="div" sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: 75, height: 75, borderRadius: 2, backgroundColor: 'var(--bg)', }} style={{ '--bg': color } as React.CSSProperties} /> </Stack> ); }