Menu
Since I've implemented server side rendering and managing the styles with styled-components, Im unable to edit styles in Chrome Dev Tools. The styles in devtools become italic and theres no checkbox to turn off/on specified style.
It works properly in Mozilla. But why not in Chrome? Any ideas why does it happen? Thanks.
Note: It happens in production.
574
Go to element panel ( Ctrl + Shift + p and type show element panel). Scroll to the head element right click on the element and choose Edit as HTML, go to the bottom of that element ( Ctrl + End ), add your <style></style> element there add your style in that element, and hit Ctrl + Enter .
I think you're probably seeing the styles injected via "speedy mode" in production. This uses a special DOM API that Chrome DevTools currently only shows in a read-only capacity. We haven't put in an escape hatch to disable this injection method yet, but it's being considered.
When running your setup in development mode everything should be normally inspectable and editable.
124
You may also want to consider Firefox, it can edit such styles as usual
6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
