Switching to mui5 sx prop from makeStyles- typescript error (no overload matches this call) passing object with position

Question

I have a component that I'm trying to convert to mui 5. This is how it was:

const useStyles = makeStyles({
   imageContainer: {
     display: "flex",
     width: "65%",
     float: "left",
     marginRight: "2px",
     position: "relative",
     zIndex: 99999,
  }
})

function MyComponent() {
  const classes = useStyles();

  return (
      <div className={classes.imageContainer}></div>
  )
}

And I am trying to convert it to this:

const imageContainer = {
     display: "flex",
     width: "65%",
     float: "left",
     marginRight: "2px",
     position: "relative",
     zIndex: 99999,
}
function MyComponent2() {
  

  return (
      <Box sx={imageContainer}></Box>
  )
}

I get the error "no overload matches this call". If I do it like inline with sx it works:

   <Box sx={{display: "flex",
     width: "65%",
     float: "left",
     marginRight: "2px",
     position: "relative",
     zIndex: 99999}} 
    >
        ...
    </Box>

Oddly enough, if I take away float and position I can pass it in as I planned:

const imageContainer = {
     display: "flex",
     width: "65%",
     //float: "left",
     marginRight: "2px",
     //position: "relative",
     zIndex: 99999,
}
function MyComponent2() {


  return (
      <Box sx={imageContainer}></Box>
  )
}

Or should I just continue to use makeStyles? But if I do that, how long do I have before they get rid of it? Because it says it's deprecated. Does that mean eventually it'll be removed? Thanks

Answer 1

if you're using typescript you have to define it as

    const imageContainer = {
     display: "flex",
     width: "65%",
     float: "left",
     marginRight: "2px",
     position: "relative",
     zIndex: 99999,
} as const;

Reference