Global Font-Family Style Overrides element.style

[bradenwatkins]

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 <LiveEditor>'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]

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

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

[redfieldstefan]

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.