在：使用 MUI v5 缩放过渡时，悬停变换停止工作

Question

当使用 MUI 转换时，在我的例子中是 Zoom，子元素的悬停转换不再有效。 '&:hover' 属性仍然有效，因为它改变了背景颜色，但 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>
    );

Answer 1

解决方案更新：

经过一些研究，我认为问题出在 transform 的继承链上，从 Zoom 父级到子级。我没有详细说明这在 MUI 中是如何工作的，因为我能够通过完全避免该问题找到解决方案，针对我的特定用例。

由于CSS 属性 scale()不使用transform也可以工作，所以我直接从&:hover中完全取出transform，从而避免与之相关的问题。

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

在：使用 MUI v5 缩放过渡时，悬停变换停止工作

On :hover transform stops working when using MUI v5 Zoom transition

reactjs

material-ui

next.js