i have used material UI for design the page in react with typescript template. for custom style i have used sx prop of material UI. I make a saperate object of properties that for sx props the saperate object is

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

now i am accessing the properties in sx props

.tsx file

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>


        </>
    )
}

every sx props is accepts the property except <Box sx={classes.footerInnerBox}> . it gives an error

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>

CodePudding user response：

Just add type declaration for myStyles object :-

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