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

Unfathomable

Use the select inspector tool (the first button in the upper-left of the dev tools, it looks like a square with a mouse cursor in it) and then select the UI element in the page to select and focus on it in the "Elements" tab. No need for fancy CSS class names, etc... – Karakalpak

Hi Drew, yes, I understand how to use the inspector tool, however, if you look closely at the the screenshots in my question, the MUI v4 version shows the file (component) and style block in the element class in the DOM (very helpful in locating the code), whereas, in the MUI v5 version, the DOM only says MuiBox-root for every Box element (not helpful). – Unfathomable

That is a view in the dev tool, nothing from React is driving that. – Karakalpak

Are you referring to my MUI v4 or v5 screenshot? or both? Notice that in the v4 version, the HelloWorld-root and HelloWorld-main match the name of the component and the styling "class" name. In the v5 version, this does not exist, making it much harder to know exactly which component is rendering the element hovered in the dev tool. – Unfathomable

Oh, sorry, I thought you were referring to the "styles" panel the shows the classnames and applied CSS rules. I'm still not sure what the issue is other than that you are asking how to use custom class names instead of the auto-generated names commonly used in styling libraries. Is that all you are really asking about? – Karakalpak

No worries, thank you for attempting to answer! If you look closely at my v4 screenshot, you can see in the dev tools DOM how you can read the "class" and immediately know which component/style block to look at. However, in the v5 screenshot, this is not the case. Generally speaking, how do you quickly find what piece of code/styling is rendering the element hovered in the dev tools DOM, specifically while using MUI v5? – Unfathomable

I still use MUIv4, but mostly for components, and we use styled-components for theme and styling, but it all uses a similar styling API. Looking in the MUIv5 legacy styling API docs I do see some references to possibly configuring the class names. I don't see much in the non-legacy docs though. – Karakalpak

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

Gibbons