On :当使用MUI v5缩放转换时，悬停转换停止工作

Question

当使用MUI转换时，在我的例子中，Zoom，子元素的“悬停转换”不再起作用。‘&：悬浮’属性仍然工作，因为它更改了backgroundColor，但是转换: 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>
    );

Answer 1

解决方案更新：

经过一些研究，我认为问题在于transform的遗传链，从Zoom的父母，到孩子。我还没有详细介绍这在MUI中是如何工作的，因为对于我的特定用例，我能够通过完全避免这个问题来找到解决方案。

因为CSS属性scale()也不需要使用转换，所以我只是从&:hover中完全取出了transform，从而避免了与它相关的问题。

<Zoom in={true} style={{transitionDelay: index !== 0 ? '200ms' : '0ms'}}>
            <ButtonBase sx={{'&:hover': {scale: '1.04', bgcolor: 'red'}}} >Content<ButtonBase />
</Zoom>