Styling broken in the preview pane
- Dominant language
- JavaScript
- Stars
- 19.4k
- Forks
- 3.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 9
Description
**- Do you want to request a *feature* or report a *bug*?**
bug
**- What is the current behavior?**
In-repo widget preview components, styled via Emotion, are unstyled in the preview pane.
**- If the current behavior is a bug, please provide the steps to reproduce.**
It's kind of hard to tell because the default preview components have barely any styling anyway. Just look at the preview component elements, notice how they have classes but no styling from those classes: https://cms-demo.netlify.com/#/collections/kitchenSink/entries/a-big-entry-with-all-the-things
**- What is the expected behavior?**
Should be styled.
**- Explanation**
The styles for these components are in the document head, unreachable through the iframe. We used to inject a stylesheet to the iframe, but we don't really have that option anymore. We'll likely need to use [create-emotion](https://emotion.sh/docs/create-emotion) to provide a second instance of emotion for the iframe, but I'm not sure of a clean way to make that instance available.
The ideal solution seems to be coming with Emotion 10, currently at `emotion@next`: https://github.com/emotion-js/emotion/issues/760#issuecomment-404353706
Contributor guide
Assessment
This issue has not been assessed yet.