React dev tools doesn't work properly with styled components.

[fanantoxa]

When I use React Dev tools and I'm trying to find my component source

It always points me to the Styled function instead of actual declared component.

With CSS-in-JS approach I have many of styled component and funding where is the component in the source became a real challenge.

I can get up on the tree to find first non styled parent, but it can take more then 10 parents and then I'd need to use some search down in editor to actually find the component. With a large code base it can take quite some time.

Is that any way how to make it point to the actual component? or at least to it's styled('div') creation?
Maybe some config for development or additional map for Components?

[jquense]

I'm not sure what you mean by "the actual component", that is the actual component. what you see in an editor is compiled away to a simple factory for a react component. If you want something even more transparent you may want to use the css prop. That approach leaves it up to you to define the component around the styles.

[jquense]

Should also be said if you have source maps enabled you can inspect the source in the normal dev tools more directly. I don't believe there is anything I can do to make the react dev tools point to the source file in the same way unfortunately

[fanantoxa]

I'll try to add more context.
About this Title component from my example:
It defined like this:

And rendered in the code like this:

In the React devtools it shown with proper name:

But when I click to view source, I'm getting navigated to Styled function

But actual component definition is export const Title = ...
Is that any way to make work that way so when I click to view source I'd be navigated to const Title instead function Styled

[jquense]

Is that any way to make work that way so when I click to view source I'd be navigated to const Title instead function Styled

I don't think so, unless the react dev tools specifically expose a hook for this. This seems like more of a limitation of the devtools, which (ideally) should be able to make use of the source map. Perhaps they have some additional source they check.

[fanantoxa]

Thank you for response. I'll try to talk to in react devtools repo.