-
Notifications
You must be signed in to change notification settings - Fork 60
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React dev tools doesn't work properly with styled components. #708
Comments
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 |
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 |
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. |
Thank you for response. I'll try to talk to in react devtools repo. |
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?
The text was updated successfully, but these errors were encountered: