From 1b64ed30a2e3c41abf3976efee4c7463044b2ef1 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Wed, 11 Jul 2018 01:32:51 -0300
Subject: [PATCH] feat(docz): add classname and style props for Playground

---
 .../docz-theme-default/src/components/ui/Render.tsx   | 11 +++++++++--
 packages/docz/src/components/DocPreview.tsx           |  2 ++
 packages/docz/src/components/Playground.tsx           |  6 ++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/docz-theme-default/src/components/ui/Render.tsx b/packages/docz-theme-default/src/components/ui/Render.tsx
index 197359b5d..943f9ab07 100644
--- a/packages/docz-theme-default/src/components/ui/Render.tsx
+++ b/packages/docz-theme-default/src/components/ui/Render.tsx
@@ -24,9 +24,16 @@ const Code = styled('div')`
   }
 `
 
-export const Render: RenderComponent = ({ component, code }) => (
+export const Render: RenderComponent = ({
+  component,
+  code,
+  className,
+  style,
+}) => (
   <Fragment>
-    <Playground>{component}</Playground>
+    <Playground className={className} style={style}>
+      {component}
+    </Playground>
     <Code>{code}</Code>
   </Fragment>
 )
diff --git a/packages/docz/src/components/DocPreview.tsx b/packages/docz/src/components/DocPreview.tsx
index ca2d88fe7..ee8f7c0dc 100644
--- a/packages/docz/src/components/DocPreview.tsx
+++ b/packages/docz/src/components/DocPreview.tsx
@@ -16,6 +16,8 @@ const DefaultLoading: SFC = () => null
 export type RenderComponent = ComponentType<{
   component: JSX.Element
   code: any
+  className?: string
+  style?: any
 }>
 
 export const DefaultRender: RenderComponent = ({ component, code }) => (
diff --git a/packages/docz/src/components/Playground.tsx b/packages/docz/src/components/Playground.tsx
index d6ff5a3f1..418c82e37 100644
--- a/packages/docz/src/components/Playground.tsx
+++ b/packages/docz/src/components/Playground.tsx
@@ -9,15 +9,21 @@ export interface PlaygroundProps {
   __code: (components: ComponentsMap) => any
   children: any
   components: ComponentsMap
+  className?: string
+  style?: any
 }
 
 const BasePlayground: SFC<PlaygroundProps> = ({
   components,
   children,
   __code,
+  className,
+  style,
 }) => {
   return components && components.render ? (
     <components.render
+      className={className}
+      style={style}
       component={isFn(children) ? children() : children}
       code={__code(components)}
     />