search

rebassjs / rebass

:atom_symbol: React primitive UI components built with styled-system.
https://rebassjs.org
MIT License
7.94k stars 656 forks source link

Inline variants #645

Closed DiemasMichiels closed 5 years ago

DiemasMichiels commented 5 years ago

Hi,

You just released inline variants for Styled-System v.5.1.0 Can we also do this with rebass? Are there any plans to do this or do we need to always define our variants in the theme file?

Thanks!

jxnblk commented 5 years ago

Hi, Rebass works a bit differently from Styled System from an API standpoint. The variant feature in both libraries works mostly the same, but the Rebass variants must be defined in the theme. You can extend a Rebass component with @emotion/styled and use the variant utility from Styled System, but I haven't tried this and it might or might not work like expected

DiemasMichiels commented 5 years ago

That's what we expected. We are going with this approach: add a variants.ts file to your components where you handle all the component variants and type them. Include every variants.ts file in your theme.variants.

rossthedevigner commented 5 years ago

@DiemasMichiels Can you post a gist of that approach?