[v2] docz css pollute the <Playground>

[crusoexia]

Bug Report

Describe the bug

Seems like there is no css isolation between the doc style and the live playground, user's component will be polluted by docz's css.

<Playground name="Default">
  <Accordion>
    <AccordionPanel active title="Lil Mud Runner kids1">
       Some text
    </AccordionPanel>
  </Accordion>
</Playground>

Expected behavior

docz's css should not pollute the playground

Environment

• docz version: ^2.0.0-rc.55
• OS: MacOS 10.14.6
• Node/npm version: 10.15.0/6.12.0

** screenshot **

polluted:

What it should like:

[stale]

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.

[rakannimer]

@Stale Not stale.

Hey @crusoexia

This is solved in 2.2.0.

To scope your playground styles and make them independent of docz theme css you have 2 choices :

1. add a useScoping prop to your playground

<Playground useScoping> 
{
// blablabla
}
</Playground>

2. add useScopingInPlayground : true in doczrc.js

export default {
	useScopingInPlayground: true
}

Sorry for the delay in the reply but the fix was implemented thanks to you raising this issue ! So thanks 👍

Going to close, please re-open or comment if for some reason something doesn't work for you !

If you're interested in implementation details check #1305