/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/customization/palette/UsingStylesUtils.js
54 строки
2 KB
Brijesh Bittu
[code-infra] Remove React import requirement for jsx (#47146)
29 окт 2025, 20:55
Не верифицирован
29 окт 2025, 20:55
6c9e82f
Код
Авторство
О чём код?
import { createTheme, ThemeProvider, alpha, getContrastRatio, } from '@mui/material/styles'; import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; // Augment the palette to include a violet color // Update the Button's color options to include a violet option const violetBase = '#7F00FF'; const violetMain = alpha(violetBase, 0.7); const theme = createTheme({ palette: { violet: { main: violetMain, light: alpha(violetBase, 0.5), dark: alpha(violetBase, 0.9), contrastText: getContrastRatio(violetMain, '#fff') > 4.5 ? '#fff' : '#111', }, }, }); export default function UsingStylesUtils() { return ( <ThemeProvider theme={theme}> <Stack sx={{ gap: 2, alignItems: 'center' }}> <Button variant="contained" color="violet"> Violet </Button> <Stack direction="row" sx={{ gap: 1 }}> <Stack sx={{ alignItems: 'center' }}> <Typography variant="body2">light</Typography> <Box sx={{ bgcolor: 'violet.light', width: 40, height: 20 }} /> </Stack> <Stack sx={{ alignItems: 'center' }}> <Typography variant="body2">main</Typography> <Box sx={{ bgcolor: 'violet.main', width: 40, height: 20 }} /> </Stack> <Stack sx={{ alignItems: 'center' }}> <Typography variant="body2">dark</Typography> <Box sx={{ bgcolor: 'violet.dark', width: 40, height: 20 }} /> </Stack> </Stack> </Stack> </ThemeProvider> ); }