如何在 css-in-js Emotion 中通过自动生成的类名搜索代码？

Question

In the project, I ran into CSS-IN-JS implemented using Emotion. Usually, I look for the code of corresponding components by the names of the CSS styles, but due to the generated styles names, I feel a lot of pain when I tried to find an element from the browser in project code.

Actually, the question is, can I somehow add "names" for Emotion styles, so that at least part of the generated name will be human-readable?

If it is impossible, share how you find the “element” that you see in the browser in the project code?

Answer 1

Emotion provides a way of appending a label to the end of the class name, via a label prop. You can read about it in the official docs .