Javascript 使用 MUI 悬停时的三倍图像效果

有一个在图像上有三重悬停效果的代码笔:Codepen

当我试图用MUI接受的MUI和MUI图像在React Typescript上将其重建为样式化组件时，我的样式={…}中出现错误，无法在我的React应用程序中工作.有人能帮忙吗？我在const样式中声明了css，并将其内联apply.

App.tsx

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 };

The error:

(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; }'