search

FormidableLabs / react-live

A flexible playground for live editing React components
https://commerce.nearform.com/open-source/react-live/
MIT License
4.25k stars 239 forks source link

Global Font-Family Style Overrides element.style #177

Open bradenwatkins opened 4 years ago

bradenwatkins commented 4 years ago

Going against the intuition of css specificity, a global font style set by the user of react-live can override the local element.style attribute. This is most noticeable when the global font overrides the 'monospace' styling of the 's textarea.

This issue can be reproduced here: https://codesandbox.io/s/elated-murdock-8oh40

This issue can not be reproduced using the legacy component-sandbox library: https://codesandbox.io/s/crazy-star-p0n0r

Expected Behavior: Global font styles should not override the local font styles

bradenwatkins commented 4 years ago

Looking into it more, it looks like an underlying issue with react-simple-code-editor.

https://codesandbox.io/s/boring-fermat-r04c4

redfieldstefan commented 4 years ago

Hi @bradenwatkins, I've been taking a look at this and it looks like the elements actually inheriting global styles like those provided in your example are the .token elements generated by prism-react-renderer that highlight and render the provided code in the editor. They're not children of the textarea and have no inlined styles. Hopefully that info helps, I'll see if there is anything to do on prism-react-render's end to address this, or if that is even wise to do.