This <Box/> method is the preffered way of doing it. The <Paper/> method too is a good idea. The basic reasoning is that only MUI components support the sx prop ie. only they can fully use the MUI systems features. Thus, it doesnt make sense to use the native <img/> component in the markup, as it does not support sx

The SX prop does not work with non MUI components eg. native <img/> component. To style this, you will have to use the native inline styling ie. <img style=" ............". /> If you want to style the img and use some MUI system specific features, ie. you need to use sx ; do the following. Use <Box component="img" sx={{ }} /> instead. This supports the sx prop, thus your image will be customizable with sx prop.