Prepend docz CSS classnames to prevent conflicts

[auermi]

We have a component that uses the className tag. This is causing conflicts with elements with className of tag used in the Playground.

A potential solution would be to prepend all docz CSS classes with docz-

Example:

[rakannimer]

Hey @auermi

Thanks for reporting this issue.

This seems prism-react-renderer specific.

We can either open an issue there with a request to allow us to prepend some string to the class names or wrap the playground editor in an iframe.

[rakannimer]

Hey @auermi

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 it, please re-open or comment if for some reason something doesn't work for you !

If you're interested in implementation details check #1305

[auermi]

@rakannimer Thanks!