Theme-ui: Styled syntax with the sx prop

[arjunnaha]

Is your feature request related to a problem? Please describe.
Coming from vanilla Styled Components, I love the consistency I'm getting with Theme UI. I might be going around using Theme UI in the complete wrong way, but I find myself writing the following a lot:

const ComponentName: FC = (props) => (
  <Box
    {...props}
    sx={{
      bg: "white",
      more styles...
    }}
  />
);

Describe the solution you'd like
Is there anyway to reduce this snippet to something similar like this?

const ComponentName = styled(Box,
  {
    bg: "white",
    more styles...
  })

Describe alternatives you've considered
I've tried to create a small utility file:

/** @jsx jsx */
import React, { FC } from "react";
import { jsx } from "theme-ui";


const styled = (Component: new() => React.Component<any, any>, sx: Object, props?: any) => (
  <Component
    {...props}
    sx={{
      ...sx
    }}
  />
);

export default styled;

But I get complex TypeScript errors:

Argument of type 'StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxOwnProps, {}>' is not assignable to parameter of type 'new () => Component<any, any, any>'.
  Type 'StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxOwnProps, {}>' provides no match for the signature 'new (): Component<any, any, any>'.

[dburles]

TBH you're better off moving off the styled API completely and sticking with the sx prop. While you might feel you're repeating yourself creating what you might consider to be purely "styled" components, I would instead forget that idea and just treat them as the regular old components that they are.

It's also quite likely you'll want to extend them at some point and add other React-y things such as hooks etc, and you've just saved yourself the hassle of having to convert styled(Box, ..etc) into you know, a normal React component :)

[arjunnaha]

I've just had to use hooks, so I'll very much be sticking with the sx prop and writing functional components 😀. Cheers!

[lachlanjc]

Yep, seconding that sx is the way to go. If you’re repeating the same styles in lots of places, check out variants: https://theme-ui.com/guides/variants/

[jxnblk]

Agree with the comments above, but for others looking for usage with the styled HOC API, you can use the @theme-ui/css package directly for this:

import styled from '@emotion/styled'
import css from '@theme-ui/css'

export default styled('div')(
  css({
    color: 'primary',
  })
)