Docz: 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 https://github.com/doczjs/docz/blob/95b0d7f9b304d3f5abbb4232018cad69f6fdfaa6/core/gatsby-theme-docz/src/components/Playground/styles.js#L41)

[trybick]

A global CSS selector worked for me
https://github.com/doczjs/docz/issues/1325#issuecomment-574993680

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: https://github.com/doczjs/docz/issues/1360#issuecomment-580715780

Closing the issue.