In MUI v4, it's very easy to inspect the DOM and isolate the exact component file and style block within that file:
MUI v4 way of finding a specific element/style class
However, in MUI v5, this is not possible, which makes it much harder to debug and find elements in styling buried in your code (my screenshot is trivial, but imagine having a large app with hundreds of components):
MUI v5 way of doing styling with DOM inspection
Is there a better debugging MUI v5 to allow for faster finding/isolation of a specific component/styling block in the code?
Also, here are the various ways I've found of doing (and not doing) styling in MUI v5, however, none of them show good debugging info when inspecting the DOM (see the github source for the difference between classes, styles, and sty):
{/* OK - these work */}
<Box sx={{ ...classes.text }}>HELLO</Box>
<Box style={classes.text}>HELLO</Box>
<Box css={styles.text}>HELLO</Box>
<Box sx={sty.text}>HELLO</Box>
{/* FAIL - these do not work - the v4 way, for completeness */}
<Box classes={{ root: classes.text }}>HELLO</Box>
<Box className={classes.text}>HELLO</Box>
<Box class={classes.text}>HELLO</Box>
Source: https://github.com/masaok/react-css-google-demo/blob/master/src/archive/GoogleTest.jsx#L72-L81