Theme-ui: Custom Component with Custom Variants

[moshemo]

I am wondering, is it possible to create custom components that use custom variants when used.

For example:

// components.js
const MyComp = ({children}) => (
   <Box>{children}</Box>
}

// theme.js
boxes: {
  customVariant: {
     height: "24px",
     width: "250px",
     bg: "#abcdef"
  }
}

// index.js
const OtherComp = () => (
   <MyComp variant=customVariant">CONTENT</MyComp>

I tried something like this and it did not work. I even tried other variations - and no success.

So I am wondering, is something like this possible? If so, how can I do it?

Thanks.

[lachlanjc]

For sure! You just need a small tweak in your component code.

The problem is that your component wasn't passing props down—if you try adding id="x" on index.js you'll notice it's not rendering, so the same thing is happening with variant. Once you allow all props (& since children is a prop, it'll be automatically included), it should work as expected.

// components.js
-const MyComp = ({children}) => 
-   <Box>{children}</Box>
+const MyComp = ({ children, ...props }) => (
+  <Box {...props}>{children}</Box>
}

Or, even simpler:

const MyComp = props => <Box {...props} />

[lachlanjc]

Let us know if you have any other issues, otherwise I think this can be closed

[CanRau]

If you have this in your theme

boxes: {
  customVariant: {
     height: "24px",
     width: "250px",
     bg: "#abcdef"
  }
}

you'd access it like so

<MyComp variant="boxes.customVariant">CONTENT</MyComp>

[moshemo]

This worked perfectly -- and I realize that I don't even need to use box or boxes in the theme file. Thanks.

[CanRau]

Uh glad it worked 🎉

I was just writing an update^^ so even if it's unnecessary here you go:

You could however do sth like this

const OtherComp = () => (
  <Box as={MyComp} {...props} __themeKey="boxes">
)
// and then
<OtherComp variant="customVariant"/>

that's how the exported @theme-ui/components define their theme "group"..

By the way if you're satisfied you could close this issue 😉