Преобразование On: hover перестает работать при использовании перехода MUI v5 Zoom
При использовании переходов MUI, в моем случае Zoom, преобразование дочернего элемента при наведении больше не работает. Свойство '&:hover' по-прежнему работает, поскольку оно изменяет backgroundColor, а свойство transform: scale(1.04) — нет.
Как я могу убедиться, что мои карты появляются в поле зрения, а затем также увеличиваются при наведении курсора?
(Я использую Next.js с MUI v5.)
import { Zoom} from "@mui/material";
import { ButtonBase } from "@mui/material";
export default function CustomCard({ index }) {
return (
<Zoom in = {true} style = {{transitionDelay: index !== 0 ? '200ms' : '0ms'}}>
<ButtonBase sx = {{'&:hover': {transform: 'scale(1.04)', bgcolor: 'red'}}} >Content<ButtonBase />
</ Zoom>
);
Ответы 1
ОБНОВЛЕНИЕ РЕШЕНИЯ:
После некоторых исследований я пришел к выводу, что проблема заключается в цепочке наследования transform от Zoom родителя к детям. Я не вдавался в подробности того, как это работает в многоязыковом пользовательском интерфейсе, так как мне удалось найти решение, полностью избегая проблемы для моего конкретного случая использования.
Так как свойство CSS scale() работает и без использования трансформации, я просто полностью вынес transform из &:hover, тем самым избежав связанной с ним проблемы.
<Zoom in = {true} style = {{transitionDelay: index !== 0 ? '200ms' : '0ms'}}>
<ButtonBase sx = {{'&:hover': {scale: '1.04', bgcolor: 'red'}}} >Content<ButtonBase />
</Zoom>