By default, all Chakra components work with the
as prop. There might be some
cases where you need to create smaller components with pre-defined styles, and
as prop to work as well.
For example, let's say you create a
Card component with pre-defined styles
and you need to need to consume this component in a way that works with the
prop, like this:
You might run into type errors like this:
To resolve this, you have 3 options
This is the recommended approach as it ensures your components forwards their reference properly.
Note 🚨: You need to use forwardRef from chakra-ui not react.
ChakraComponent is a type we use internally to mark specific components as
Chakra components rather than using
This is because a
ChakraComponent comes props from the React component or
element type, and adds chakra specific style props.
ChakraComponent takes 2 type generic, the element type (like "div", "button",
etc), and any custom props (like
The Chakra factory function is still a work in progress but it can be useful in this case as well. It can also be used to convert a non-chakra component into a Chakra enabled component.
What you need to do is to call the
chakra function and pass it any element or
These are the cases you can get the
as prop working with custom components. At
least for now.