How to build custom components based on <Box>?

[gregoralbrecht]

Hey everyone 👋 First of all, thank you all for the effort you're putting into this project. It's helped me immensely and even after having read a lot of PRs, issues, and discussions on here, I'm still not grasping the bigger picture. So kudos!

Now, I have read about the useVariants() idea here, the confusion about all different ThemeProviders and several comments on TypeScript support. However, I'm still not sure I fully understand the direction in which the upcoming changes regarding ThemeProviders and variants. What I would love to do is: Build custom components similar to the ones in @theme-ui/components:

import { Box } from '@theme-ui/components'

const Text = React.forwardRef(function Text(props, ref) {
  return (
    <Box
      ref={ref}
      as="p"
      sx={{
        // custom styles
      }}
    />
  );
});

I tried a lot of different versions of @theme-ui/core, @theme-ui/components—and now even @theme-ui/theme-provider—but I just couldn't get it to work. Here were my approaches:

1. @latest versions (v0.3.5)

I installed @theme-ui/core@latest and @theme-ui/components@latest. The <Box> and the sx prop worked just fine by itself. However, due to TypeScript errors, I was not able to a) pass a ForwardRef to it (like above) and b) pass any other props to <Box>.

2. @next versions (v0.6.0-alpha.4)

I thought—since you were working on types lately—that maybe upgrading to 0.6.0-alpha.4 for both packages would fix the TypeScript errors. It didn't fix it and now the sx prop wasn't resolving any values from my theme, even on the <Box> coming straight from @theme-ui/components.

3. Using theme-ui

Then, I tried to use theme-ui (I tried to avoid it because it includes a lot of things I don't need), but same result as before: Theme values were not resolved.

Target API

I would love to achieve something like this:

<Text size={2} tone="positive">Hola</Text>

I'm coming from styled-system, so I'm a bit biased here. But I loved the variants API there, which let me do this:

const Text = styled('p', { shouldForwardProp })(
  variant({
    prop: 'size',
    variants: {
      tiny: {
        fontSize: 0,
      },
      small: {
        fontSize: 1,
      },
      standard: {
        fontSize: 2,
      },
      large: {
        fontSize: 3,
      },
    },
  }),
  variant({
    prop: 'tone',
    variants: {
      neutral: {
        color: 'grey.800',
      },
      positive: {
        color: 'green.700',
      },
      critical: {
        color: 'red.700',
      },
    },
  }),
)

Can anyone give me any hints on

1. How I could make the sx prop and Box work in TypeScript?
2. How to achieve a similar API like the above for custom components with Theme UI?

Any input would be much appreciated 🙏

[hasparus]

Happy New Year @gregoralbrecht

It didn't fix it and now the sx prop wasn't resolving any values from my theme, even on the coming straight from @theme-ui/components.

This sounds like its Emotion context version mismatch (new Theme UI depends on Emotion 11), and if it isn't this then it's serious. Do you have a repro?

---

How I could make the sx prop and Box work in TypeScript?

It works for me? I'll send you a CodeSandbox in a bit, and we'll try to troubleshoot your issue.

How to achieve a similar API like the above for custom components with Theme UI?

Well, Theme UI doesn't export a styled component factory, and I think it won't. You can build it on top of sx prop and theme.variants or use Stitches if you like this API.

[gregoralbrecht]

Happy New Year to you, too! And thank you for the fast response.

This is the weirdest thing. Apparently, I messed up big time trying to get this working locally, because in the CodeSandbox it works: https://codesandbox.io/s/text-component-for-gregor-forked-mxefb?file=/src/Box.test.tsx

I wasn't too set on the styled component factory, more on the idea to have the variants defined as you did in your CodeSandbox.

[hasparus]

Okay, so one TypeScript error you can see is

Type 'RefObject<unknown>' is not assignable to type 'RefObject<HTMLDivElement>'.

Here's a CodeSandbox for you.
Ping me if you have any more problems :)

---

Sidenote: @theme-ui/components already exports Text. If you want to build your own primitive components you can ignore it entirely, and just use @theme-ui/core. You can build your own lightweight Box component with JSX pragma or manually using jsx imported from @theme-ui/core.

---

The root cause of the problem is the fact that React.forwardRef infers props: { children?: ReactNode }, ref: Ref<unknown>, so you assigned Ref<unknown> to Ref<HTMLDivElement>.

This doesn't work because.

• Ref is covariant in T as RefObject (the thing you get from useRef, de facto { current: T }) is covariant, and ref function definition in @types/react is using bivariance hack
• Knowing that Ref is covariant, Ref<X> is assignable to Ref<Y> when X is assignable to Y
• unknown isn't assignable to HTMLDivElement

    type Ref<T> = { bivarianceHack(instance: T | null): void }["bivarianceHack"] | RefObject<T> | null;
    interface RefObject<T> {
        readonly current: T | null;
    }

[gregoralbrecht]

Thank you so much! That's great ❤️

What do you mean with

we don't support as prop on Box

? Is this not what is going on here? I'm asking because it's also in your CodesandBox. Or do you mean a different Box?

You can build your own lightweight Box component

This is exactly what I did in an earlier iteration, but without TypeScript. Due to my lack of TS knowledge, I couldn't get it to work with TS. I was aiming for something similar to what's happening in @theme-ui/components here

I'm pretty new to TypeScript, so I'm not even going to pretend to understand your last paragraph right now 🙈 Thank you very much for the details, though, will try to understand it!

[hasparus]

Or do you mean a different Box?

Fair point. Sorry, I didn't express it in the best way :/

We don't fully support as prop in TypeScript, i.e. we don't change types of Box props when we see the as prop, so you can't do this in TS

despite that it works at runtime.

It's a bit hard on compilation/IDE-suggestion times.
I'd generally advise to use JSX pragma (so you can use sx on every component which accepts className) or the components from @theme-ui/components to TypeScript users encountering this problem.

(Edited the previous post so it's not confusing for other people).

I'm pretty new to TypeScript, so I'm not even going to pretend to understand your last paragraph right now see_no_evil Thank you very much for the details, though, will try to understand it!

I noticed that "PhD candidate" in you bio, so I assumed you'll either react with "it's trivial, in hindsight" or "I don't get it, so exciting".
Sorry if it's too much details or messy :P

Anyway, as an advice for TypeScript newcomer, if you see an unknown somewhere in the error message, and you didn't explictly use unknown, try hovering over variables/parameters that you didn't annotate, and see if you can narrow that unknown either by annotating parameters or explicitly passing types to a generic function.

[hasparus]

BTW thanks so much for posting this in Discussions and stating it as a question instead of writing an issue titled "Box doesn't work in TypeScript" 😄

[gregoralbrecht]

Thanks for the advice! It's definitely still "I don't get it, so exciting" for me right now, so I will read more about this! The degree is not computer science, though, so I will have to freshen up my memory on bivariance... And yeah, I figured Discussions was more appropriate since I was clearly just not using it correctly—which was proven by your CodeSandbox. Thanks again!