Creating a guide how to style third-party libraries

Question

Creating a guide how to style third-party libraries

arantespp opened this issue 2 years ago · comments

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.

Arda Sevinç · Answer 1 · Fri Aug 26 2022 19:13:29 GMT+0800 (China Standard Time)

I'm also interested in this

Lachlan Campbell · Answer 2 · Sat Aug 27 2022 08:37:07 GMT+0800 (China Standard Time)

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

Piotr Monwid-Olechnowicz · Answer 3 · Mon Aug 29 2022 23:54:59 GMT+0800 (China Standard Time)

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.