feat(docz): add classname and style props for Playground

doczjs · Jul 11, 2018 · 1b64ed3 · 1b64ed3
1 parent 6e2a15d
commit 1b64ed3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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)}
     />