基于MUI的React TS图片悬停三重效果实现报错求助

我需要将一个实现图片悬停三重效果的示例，在React TypeScript项目中用MUI及mui-image组件重构为内联样式组件，但style属性报错，无法正常运行。

我的代码 #

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

const styles = {
  body:{
      background: "#3d4552",
      fontFamily: "arial",
      fontSize: "12px",
      color: "#fff",
  },
  
  img: {
      border: "1px solid #d2d2d2",
      padding: "3px",
      boxShadow: "0 0 15px rgba(0,0,0,.1)",
  },
  
  picContainer: {
      maxWidth: "210px",
      maxHeight: "210px",
      margin: "50px",
  },
  
  pic: {
      background: "#fff",
      position: "absolute",
      transition: "all 0.2s ease",
      backfaceVisibility:"hidden",
  },
  
  "pix:nth:child(1)": {
      zIndex: 3,
  },
  
  "pic:nth-child(2)": {
      zIndex: 1,
  },
  
  "pic:nth-child(3)": {
      zIndex: 2,
  },
  
  "picContainer:hover .pic:nth-child(1)": {
      transform: "rotate(15deg)",
      transition: "all 0.5s ease",
  },
  
  "picContainer:hover .pic:nth-child(2)": {
      transform: "rotate(7deg)",
      transition: "all 0.10s ease",
  },
  
  "picContainer:hover .pic:nth-child(3)": {
      transform: "rotate(-5deg)",
  },
  
  picCaption: {
      background: "#82a3d4",
      padding: "10px 15px",
      color: "#fff",
      fontSize: "12px",
      position: "relative",
      zIndex: "10",
      top: "90px",
      left: "200px",
      borderRadius: "3px",
      transition: "all 0.5s ease",
      opacity: 0,
  },
  
  "picCaption:hover": {
      background: "#607fae",
  },
  "picContainer:hover .pic-caption": {
      left:"230px",
      opacity: 1,
  },
  
};

function Hover() {
  return (
    <Box style={styles.picContainer}>
      <Image src="https://via.placeholder.com/150" style={styles.pic}  />
      <Image src="https://via.placeholder.com/150" style={styles.pic} />
      <Image src="https://via.placeholder.com/150" style={styles.pic} />
    </Box>
  );
}

export { Hover };

报错信息 #

(property) MuiImageProps.style?: React.CSSProperties | undefined

Type '{ background: string; position: string; transition: string; backfaceVisibility: string; }' is not assignable to type 'Properties<string | number, string & {}>'.
  Types of property 'backfaceVisibility' are incompatible.
    Type 'string' is not assignable to type 'BackfaceVisibility | undefined'.ts(2322)

index.d.ts(28, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & MuiImageProps & { children?: ReactNode; }'

错误原因 #

1. 类型校验问题：TypeScript对React的CSSProperties有严格类型定义，backfaceVisibility属性的类型是BackfaceVisibility枚举（可选值为"visible" | "hidden" | "inherit"等），直接写字符串"hidden"会被推断为宽泛的string类型，和要求的枚举类型不匹配。
2. 内联样式局限性：React内联样式不支持伪类选择器（如:hover）、后代选择器（如.pic:nth-child(1)），你写的那些带hover和nth-child的样式根本不会生效，这也是原效果无法实现的核心问题。

解决方法 #

方案一：用MUI styled组件实现（推荐，完全支持原效果） #

MUI的styled组件允许编写完整的CSS语法，包括伪类和选择器，同时自动处理TypeScript类型：

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

// 全局样式
const globalStyles = (
  <GlobalStyles
    styles={{
      body: {
        background: "#3d4552",
        fontFamily: "arial",
        fontSize: "12px",
        color: "#fff",
      }
    }}
  />
);

// 自定义图片容器组件
const PicContainer = styled(Box)`
  max-width: 210px;
  max-height: 210px;
  margin: 50px;
  position: relative; /* 必须添加，确保绝对定位的图片在容器内 */

  .pic {
    background: #fff;
    position: absolute;
    transition: all 0.2s ease;
    backface-visibility: hidden;
    border: 1px solid #d2d2d2;
    padding: 3px;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
  }

  .pic:nth-child(1) {
    z-index: 3;
  }

  .pic:nth-child(2) {
    z-index: 1;
  }

  .pic:nth-child(3) {
    z-index: 2;
  }

  &:hover .pic:nth-child(1) {
    transform: rotate(15deg);
    transition: all 0.5s ease;
  }

  &:hover .pic:nth-child(2) {
    transform: rotate(7deg);
    transition: all 0.1s ease;
  }

  &:hover .pic:nth-child(3) {
    transform: rotate(-5deg);
  }

  .pic-caption {
    background: #82a3d4;
    padding: 10px 15px;
    color: #fff;
    font-size: 12px;
    position: relative;
    z-index: 10;
    top: 90px;
    left: 200px;
    border-radius: 3px;
    transition: all 0.5s ease;
    opacity: 0;

    &:hover {
      background: #607fae;
    }
  }

  &:hover .pic-caption {
    left: 230px;
    opacity: 1;
  }
`;

function Hover() {
  return (
    <>
      {globalStyles}
      <PicContainer>
        <Image src="https://via.placeholder.com/150" className="pic" />
        <Image src="https://via.placeholder.com/150" className="pic" />
        <Image src="https://via.placeholder.com/150" className="pic" />
        <div className="pic-caption">示例标题</div>
      </PicContainer>
    </>
  );
}

export { Hover };

方案二：仅修复类型问题（无法实现hover效果） #

如果暂时只需要解决类型报错，不想改架构，可以用as const将字符串字面量推断为对应的CSS属性类型：

const styles = {
  // ...其他样式
  pic: {
      background: "#fff",
      position: "absolute" as const,
      transition: "all 0.2s ease" as const,
      backfaceVisibility: "hidden" as const,
  },
  // ...其他样式
};

但注意：这种方式只能解决类型报错，原hover效果还是无法实现，因为内联样式不支持伪类。

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