Custom Component with Custom Variants

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.

[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>

[ghost]

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