Theme-ui: When to style a component in your theme file

[whather]

I'm looking over the theme-ui component library and noticed there's base styles set in the component files themselves (https://github.com/system-ui/theme-ui/blob/master/packages/components/src/Button.js#L11-L24), and also the ability to style the component in your theme file through a variant (https://github.com/system-ui/theme-ui/blob/master/packages/docs/src/gatsby-plugin-theme-ui/index.js#L87-L91).

Is the idea to only use the theme file for overrides, meaning the component's default variant will not be in the default theme file? And any component with only one variant will not in the theme file and only styled in the component file itself? Or what other criteria do you use to make the decision to modify a component's styling in the component itself versus in the theme file?

[jxnblk]

The default styles in each component are meant to be as unopinionated as possible. Due to the lack of more sophisticate APIs for styling HTML form elements, some components have more default styles that others in an attempt to make them easier to customize. Ideally, a theme object with variants for components should be all you need to create a custom UI component library based off of Theme UI, if that makes sense

[whather]

Thanks @jxnblk.

BTW quick question regarding your Box component. I'm wondering why you chose to only include the space and color css props, versus including other layout specific css props like layout, position and flexbox. Was it a compromise with performance or another reason? You could make the case that you'd use the flex="1" prop way more often than say the opacity={0.5} prop.

If I was to make my own Box component which included the listed css prop groups above, should I be worried about performance? For example if I need a <div/> wrapper to just set the color of some child components, am I better off with using <Box/> (for consistency) or would you recommend <div sx={{color: '#fff' }} />. Meaning is performance going to take enough of a hit where I should be worried about those decisions in a relatively large app?

[jxnblk]

space and color props are only provided as an additional shortcut -- really the sx prop is the primary intended way to apply styles in Theme UI; with the latest Styled System release, adding more props should not affect performance

[lachlanjc]

@hasparus I think we can close this as a discussion