Improve the styling DX to quickly find a specific component using browser dev tools

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

This StackOverflow question (that I wrote) explains the problem clearly:

https://stackoverflow.com/questions/71152038/in-mui-v5-how-do-you-debug-find-a-specific-element-style-class-in-the-dev-tools

Quick recap:

In MUI v4, it was very easy to locate a specific component and it's style block (HelloWorld-main) using the browser dev tools:

In MUI v5, the dev tools Mui-root css-1lekm29 does not indicate the componnt/style block in the React code:

After an email response from Olivier Tassinari, he suggested I open this issue.

This is an excerpt from Olivier's email, specifically with his solution:

Emotion has a babel plugin to link where the styles have been created https://emotion.sh/docs/@emotion/babel-plugin. The DX should feel like this https://user-images.githubusercontent.com/3468483/157389915-6f08dc9b-f3b2-47b3-b9cf-6768681f81fe.mp4.

I did a bit more exploration on the problem, I have found that because of our custom _document.tsx Next.js integration using extractCriticalToChunks, we don't provide the source map, breaking the source map. Without, it works :), proof:

Olivier ended the email with:

Now, in our case, we are using the , the babel plugin only looks at the styled() calls, so it would likely need a custom Babel plugin to make it work.
...
It could be a great opportunity to improve the styling DX. For example, when using Tailwind CSS, I believe that this problem is unsolved.

Examples 🌈

https://user-images.githubusercontent.com/3468483/157389915-6f08dc9b-f3b2-47b3-b9cf-6768681f81fe.mp4

Motivation 🔦

Given a very large React app, it's very easy to get lost in all of the components, so being able to quickly locate a specific component after inspecting the DOM in dev tools would be critical to the DX (as Olivier mentioned in his email).

Start by reproducing the MUI v5 styling inspection problem described in the linked Stack Overflow question, then examine the custom _document.tsx integration and Emotion's extractCriticalToChunks behavior. Done should mean browser dev tools can identify the specific component or style source when inspecting a component such as Box.