What do italics in Chrome devtools elements mean?

It seems to be using some kind of JS generated CSS injected in the page. styled-components is known to do this and the styles are then read-only in the Dev tools.

Source: Impossible to edit styles in Chrome?

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.


This seems to happen for some styles if you reload the page with Chrome Dev Tools already open on that page. Try closing Dev Tools, reload the page, and then reopen Dev Tools and see if you can then make them editable.