Creating a guide how to style third-party libraries

[arantespp]

Is your feature request related to a problem? Please describe.

We're using Theme UI to create our components library, and we had difficulty understanding how to style third-party libraries—when to use sx, variants, wrapper in a parent Box, using classNames...

Describe the solution you'd like

It'd be interesting if we had a guide with all possible ways to style a third-party library. For example:

• Using className to style child components. (Reference)
• Using useThemeUi and useResponsiveValue.
• Variants
• Global

The title of the guide could be "Styling Third-Party Libraries."

I can help writing this guide if you think it's interesting to the project.

[ardasevinc]

I'm also interested in this

[lachlanjc]

That’d be fantastic! We’d love a contribution of a guide. I’m unlikely to write one myself but happy to review/edit.

[hasparus]

There are definitely some caveats and mines to step here, so a guide could definitely add some value.

We could also hop on Discord or a Twitter space and chat about it.

I've been solving a lot of useResponsiveValue and useMatchMedia related SSR problems lately.
This wouldn't be a problem in case of your Modal. I think I'd often use a custom CSS property with a responsive tuple like --my-padding: ['$sm', '$lg'] in cases like this. So yeah, definitely an interesting topic.