Hacker News Reader

Am I misinterpreting something? In my app that uses CSS-in-JS, if I go to the "Elements" tab of my browser developer tools and select an element, I have the option to inspect, add, remove and change styles — including using the color picker and bézier curve editor — and have it reflected live on the page.

View on HN

There's a little known feature in Chrome where you can save your inspector changes locally:

https://rafaltomal.com/tips/save-css-chrome-inspector/

When my styled-components app is in prod, the styles are non-editable. When developing, I can use Chrome Dev Tools. On prod, I have to copy paste. Maybe I'm doing something wrong?

I believe this is a result of it using the "CSSOM" browser APIs for speed in production. Unfortunately, browsers apparently haven't figured out how to make such styles editable yet.

It's definitely a limitation of certain CSS-in-JS implementations, but unfortunately one that inherently comes from "using the platform."

Reply on news.ycombinator.com