In MUI v5, how do you debug/find a specific element/style/class in the dev tools DOM?

Question

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

Answer 1

You can add a label attribute to your styles and it will show up in the inspector. E.g.:

main: { color: 'blue', fontWeight: 'bold', label: 'someLabel' }

And this will show up in the inspector as after the css-hash:

E.g:

<div class="MuiBox-root css-h8tuqk-someLabel">...</div>

Elements tab