React+MUI实现Hover图片旋转效果失效，求问题排查

你的代码有两个核心问题导致hover动画失效：

1. React内联style不支持复合选择器
   你定义的'hoverRotate img'和'hoverRotate:hover img'这种嵌套/伪类选择器，在React的内联style属性里完全无效——style只能设置当前元素的单个样式，无法选择子元素或定义hover这类状态样式。

2. MUI Image组件的DOM结构影响选择器
   mui-image组件会生成额外的包裹DOM元素，不是直接渲染<img>标签，就算选择器写法正确，也可能无法命中目标元素。

修复方案（推荐用MUI的sx属性） #

MUI的sx属性支持CSS-in-JS的嵌套语法，能轻松实现hover状态和子元素样式控制，代码修改如下：

import React from 'react';
import { Box } from '@mui/material';
import Image from 'mui-image';

function Rotate() {
    return (
        <Box 
            sx={{
                overflow: 'hidden',
                margin: '8px',
                minWidth: '240px',
                maxWidth: '320px',
                width: '100%',
                // 父元素hover时，控制内部img的变换
                '&:hover img': {
                    transform: 'scale(1.3) rotate(5deg)',
                }
            }}
        >
            <Image 
                src="https://picsum.photos/id/669/600/800.jpg"
                sx={{
                    transition: 'all 0.3s',
                    boxSizing: 'border-box',
                    maxWidth: '100%',
                }}
            />
        </Box>
    );
}

export { Rotate };

更简洁的替代方案（直接用原生img标签） #

如果不需要mui-image的额外功能，直接用原生<img>标签可以避免DOM结构的干扰，代码更直观：

import React from 'react';
import { Box } from '@mui/material';

function Rotate() {
    return (
        <Box 
            sx={{
                overflow: 'hidden',
                margin: '8px',
                minWidth: '240px',
                maxWidth: '320px',
                width: '100%',
                // 统一设置内部img的基础样式
                '& img': {
                    transition: 'all 0.3s',
                    boxSizing: 'border-box',
                    maxWidth: '100%',
                },
                // hover时的变换效果
                '&:hover img': {
                    transform: 'scale(1.3) rotate(5deg)',
                }
            }}
        >
            <img src="https://picsum.photos/id/669/600/800.jpg" alt="示例图片" />
        </Box>
    );
}

export { Rotate };

内容的提问来源于stack exchange，提问作者user18943198