Custom background for the playground

Hi, thanks for your work on Docz, I’m giving it a try and it’s fantastic! 🎉

How would one go about changing the background of the preview in the <Playground> for only one component ? It doesn’t look like it’s possible at the time of writing.

Description

I know you can create a custom theme for the entire Docz site, but in our case it’s only a specific subset of components that don’t work well on a white background, with the vast majority looking great.

It would be great if we could just pass in a CSS colour as a property of the playground that would only affect that specific instance.

Thanks, Alvin

[corysimmons]

style doesn’t seem to work on <Playground> anymore, and I can’t wrap playground in a <div>. Seems the only way to style is within playground, which means people hitting the clipboard btn will get the wrapping element/styles as well. 😦

[kikorb]

I did recheck and the width is the problem. This works great:

<Playground style={{ backgroundColor: "#eee", margin: '-2em', padding: '2em', width: 'auto' }}>
  <Button handleClick={ () => alert('Working') } >
    Accept
  </Button>
</Playground>