Creating a guide how to style third-party libraries

Question

Creating a guide how to style third-party libraries

arantespp opened this issue 3 years ago · 3 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.

Answer 1 · 2022-08-26T11:13:29.000Z

I'm also interested in this

Answer 2 · 2022-08-27T00:37:07.000Z

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

Answer 3 · 2022-08-29T15:54:59.000Z

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.