I encountered an issue while converting a component to mui 5. Here is the original code snippet:
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>
)
}
During the conversion process, I made some changes to the code as shown below:
const imageContainer = {
display: "flex",
width: "65%",
float: "left",
marginRight: "2px",
position: "relative",
zIndex: 99999,
}
function MyComponent2() {
return (
<Box sx={imageContainer}></Box>
)
}
However, I encountered an error message stating "no overload matches this call". When using inline styling with sx property, it works fine:
<Box sx={{display: "flex",
width: "65%",
float: "left",
marginRight: "2px",
position: "relative",
zIndex: 99999}}
>
...
</Box>
Interestingly, if I remove the 'float' and 'position', I can use the object as planned:
const imageContainer = {
display: "flex",
width: "65%",
//float: "left",
marginRight: "2px",
//position: "relative",
zIndex: 99999,
}
function MyComponent2() {
return (
<Box sx={imageContainer}></Box>
)
}
Should I stick with using makeStyles or should I be concerned about its deprecation in the future? Will it eventually be removed entirely? Thanks