属性 is "Display" incompatible with index signature typescript react error

Question

我已经使用 material UI 来设计与打字稿模板反应的页面。对于自定义样式，我使用了 material UI 的 sx 道具。我制作了一个单独的属性对象，对于 sx 道具，单独的对象是

const myStyles = {
    footerContainer:{
        maxWidth: { xl: "1320px", lg: "978px", md: "738px", sm: "558px", xs: "100%" } 
    },
    footerOuterBox:{ 
        backgroundColor: "#111111", 
        padding: "20px 0" 
    },
    footerInnerBox:{ 
        display: "flex", 
        justifyContent: "space-between" , 
        flexDirection: "column"
    },
    footerLogo:{ 
        width: "120px", 
        height: "92px", 
        margin:{sm: "auto 0", xs :"auto auto"}
     }
}

现在我正在访问 sx 道具中的属性

.tsx 文件

const Footer = () => {

    const classes = myStyles;

    return (
        <>
            <Box sx={classes.footerOuterBox}>
                <Container sx={classes.footerContainer}>
                    <Box sx={classes.footerInnerBox}>
                        <Box component="img" src={footerLogo} sx={classes.footerLogo} />
                        <Box sx={{ margin: "auto 0" }}>
                        </Box>
                    </Box>
                </Container>
            </Box>


        </>
    )
}

每个 sx 道具都接受属性除了 <Box sx={classes.footerInnerBox}> 。它给出了一个错误

No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & SystemProps<Theme> & { children?: ReactNode; component?: ElementType<any> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>): Element', gave the following error.
    Type '{ display: string; justifyContent: string; flexDirection: string; }' is not assignable to type 'SxProps<Theme> | undefined'.
  Overload 2 of 2, '(props: DefaultComponentProps<BoxTypeMap<{}, "div">>): Element', gave the following error.
    Type '{ display: string; justifyContent: string; flexDirection: string; }' is not assignable to type 'SxProps<Theme> | undefined'.ts(2769)
Box.d.ts(11, 7): The expected type comes from property 'sx' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any>; } & SystemProps<Theme> & { children?: ReactNode; component?: ElementType<...> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>'
Box.d.ts(11, 7): The expected type comes from property 'sx' which is declared here on type 'IntrinsicAttributes & SystemProps<Theme>

Answer 1

只需为 myStyles 对象添加类型声明：-

import { Theme } from "@emotion/react";
import { SxProps } from "@mui/material";

const myStyles: { [key: string]: SxProps<Theme> } = {
    footerContainer: {
      maxWidth: {
        xl: "1320px",
        lg: "978px",
        md: "738px",
        sm: "558px",
        xs: "100%"
      }
    },
    footerOuterBox: {
      backgroundColor: "#111111",
      padding: "20px 0"
    },
    footerInnerBox: {
      display: "flex",
      justifyContent: "space-between",
      flexDirection: "column"
    },
    footerLogo: {
      width: "120px",
      height: "92px",
      margin: { sm: "auto 0", xs: "auto auto" }
    }
  };

属性 is "Display" incompatible with index signature typescript react error

Property is "Display" incompatible with index signature typescript react error

reactjs

typescript

material-ui

typeerror