/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/customization/transitions/TransitionHover.js
33 строки
810 B
Brijesh Bittu
[code-infra] Remove React import requirement for jsx (#47146)
29 окт 2025, 20:55
Не верифицирован
29 окт 2025, 20:55
6c9e82f
Код
Авторство
О чём код?
import { styled, createTheme, ThemeProvider } from '@mui/material/styles'; import { deepPurple } from '@mui/material/colors'; import Avatar from '@mui/material/Avatar'; const customTheme = createTheme({ palette: { primary: { main: deepPurple[500], }, }, }); const StyledAvatar = styled(Avatar)` ${({ theme }) => ` cursor: pointer; background-color: ${theme.palette.primary.main}; transition: ${theme.transitions.create(['background-color', 'transform'], { duration: theme.transitions.duration.standard, })}; &:hover { background-color: ${theme.palette.secondary.main}; transform: scale(1.3); } `} `; export default function TransitionHover() { return ( <ThemeProvider theme={customTheme}> <StyledAvatar>OP</StyledAvatar> </ThemeProvider> ); }