Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scoped Playgrounds are not applying styles #1390

Closed
RafaelaMG opened this issue Feb 12, 2020 · 3 comments
Closed

Scoped Playgrounds are not applying styles #1390

RafaelaMG opened this issue Feb 12, 2020 · 3 comments
Labels

Comments

@RafaelaMG
Copy link

Bug Report

Describe the bug
When using the integration with Theme-UI scoped playgrounds don't seem to be working well as they don't apply any styles to the components.

There are three problems:

  • useScoping prop doesn't seem to be working at all;
  • useScopingInPlayground: true in themeConfig does convert the Playground into an Iframe but no styles are displayed.
  • no relevant styles are injected directly into the <iframe/> <head/>

To Reproduce
/doczrc.js

themeConfig: {
useScopingInPlayground: true,
    colors: {
      red: '#f00',
    },

/colors.mdx

import { Box } from 'theme-ui';
import { Playground } from 'docz';

<Playground>
  <Box sx={{ bg: 'red', p: 3 }}>My color</Box>
</Playground>

Expected behavior

I expect a similar result to the standard <Playground/> usage, so the stylings would get correctly applied but the Playground itself would be an iframe.

Visually, I would expect something like this:
image

Additional context/Screenshots

Visually, this is the current behavior:

image

image

@RafaelaMG RafaelaMG changed the title Scoped Playground are not applying styles Scoped Playgrounds are not applying styles Feb 12, 2020
@rakannimer
Copy link
Contributor

Hey @RafaelaMG, thanks for reporting this.

useScoping prop doesn't seem to be working at all;

That was a bug, Playground was not properly passing it to its child, it should be fixed in 2.3.0-alpha.13 under docz@next.

useScopingInPlayground: true in themeConfig does convert the Playground into an Iframe but no styles are displayed.

no relevant styles are injected directly into the <iframe/>

The sx property will not work when using scoping as it relies on stylesheets that the iframe doesn't have access to. You can kind of get around this by using the style prop instead. We could get around this by using the stylesheet of the parent page but that would break the point of scoping 🤔 .

@RafaelaMG
Copy link
Author

RafaelaMG commented Feb 13, 2020

useScoping prop doesn't seem to be working at all;

That was a bug, Playground was not properly passing it to its child, it should be fixed in 2.3.0-alpha.13 under docz@next.

Thanks for letting me know 👍


that would break the point of scoping

I see your point here, but it would be interesting to keep the best of both worlds so that we have a scoped Iframe from global styles but that can include injected styles for the used components inside the Playground on the Iframe head.

docz-iframe-playground implements it like this:

image

Is this something you would consider including?

@stale
Copy link

stale bot commented Apr 13, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale label Apr 13, 2020
@stale stale bot closed this as completed Apr 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants