As is withStyleProps gets values from a theme and adds the rx and variant style props. This feels a bit ham-fisted at times, like if you don't have anything in the theme but want the rx prop for the sake of consistency. Think about a better api:
There are different ways of calling withStyleProps at the bottom of the file. a simple (const Widget = withStyleProps('Widget')) will give you a border-box div with default styles from theme.styles.Widget, a variants prop with style overrides from theme.variants.widget, and the rx/variant props.'
The more verbose signature looks like const Box = withStyleProps({name: 'Box', component: RawBox, defaultVariant: "hot"}) where RawBox is a styled emotion component of its own.
A few possible points of simplification:
move the variants key inside theme.styles.{X} and destructure it before building a component.
allow passing the style object directly to the constructor when that makes more sense than feeding it to a key
be clear on what rx does. it takes the same object that @styled-system/css does, avoiding the need for more verbose calls like:
All that said `rx` requires the `/** @jsx jsx */` pragma, and the current `withStyleProps` api does both `rx` and theming stuff. it's not always clear how it works.
My current thinking is something like this.
- consider exporting more than the single `withStyleProps` function, such as those highlighted in the link above.
- overload the `withStyleProps` function signature (all naming subject to change):
- `name` or key or a single string argument get styles from `theme.styles`(if available)
- If possible we also make this the component display name.
- `variants` are removed and added as individual keys to `theme.styles.{x}` (absent the style object there is no variants prop perhaps)
- a new `styles` key allows passing the same object inline that would have otherwise been at `theme.styles.{x}`
- `rx` (or `includeRx`) defaults to true and adds the rx prop.
- export `themed` and `rxHandler` for more granular composition.
As is
withStyleProps
gets values from a theme and adds therx
andvariant
style props. This feels a bit ham-fisted at times, like if you don't have anything in the theme but want the rx prop for the sake of consistency. Think about a better api:Most component decorator/HOC logic is built up here: https://github.com/erikdstock/roses/blob/a8c070dca0218d6de95a4ed66a72cdfdefcbf93a/src/util/styleComposition.ts#L37-L44
There are different ways of calling
withStyleProps
at the bottom of the file. a simple (const Widget = withStyleProps('Widget')
) will give you a border-box div with default styles fromtheme.styles.Widget
, a variants prop with style overrides fromtheme.variants.widget
, and therx
/variant
props.'The more verbose signature looks like const
Box = withStyleProps({name: 'Box', component: RawBox, defaultVariant: "hot"})
whereRawBox
is a styled emotion component of its own.A few possible points of simplification:
variants
key insidetheme.styles.{X}
and destructure it before building a component.rx
does. it takes the same object that@styled-system/css
does, avoiding the need for more verbose calls like:rather <Box rx={{bg: 'primary'}} />