How to update styles of playground preview without overriding Playground component

[abdullahtariq1171]

Question

How to update styles of playground preview without overriding Playground component.

Description
I want to customize playground styles, (this line in particular

docz/core/gatsby-theme-docz/src/components/Playground/styles.js

Line 41 in 95b0d7f

padding: '20px',

)

[trybick]

A global CSS selector worked for me
#1325 (comment)

Creating a custom component might work too
https://github.com/doczjs/docz/blob/master/examples/shadowed-playground/src/gatsby-theme-docz/components/Playground/index.js

[abdullahtariq1171]

lol... that's my comment 😊 glad it worked

[mickaelzhang]

Not sure but you probably could shadow the styles.js file I guess?

import { preview as defaultPreview } from 'gatsby-theme-docz/src/components/Playground/styles'

export * from 'gatsby-theme-docz/src/components/Playground/styles.js'

export const editor = {
	...defaultPreview,
	padding: '100px',
}

[drewlustro]

+1 to use Theme UI for the Playground component

[mickaelzhang]

@abdullahtariq1171 Has your question been answered?

[abdullahtariq1171]

hey @mickaelzhang yeah your solution looks better than using global css selector. I discovered shadowing component technique late. Thanks

Solution: #1360 (comment)

Closing the issue.