More meaningful/semantic class names during development

Currently all generated class names look like this:

And it really causes problems while debugging. I do not understand where I am. Well of course I can switch between react devtools and inspector – but it does not make it more convenient.

Is it possible to use class names similar to styled components names. Maybe with random prefix like:

const Wrapper = styled.div`
  background: red;
`;

and the class name will be like .frh743-Wrapper or smth like this.

[kitten]

Yes, you can use the babel plugin to attach the displayName to the component’s class https://github.com/styled-components/babel-plugin-styled-components

[CMCDragonkai]

What about using that in a type script environment?