Chakra factory serves as an object of chakra enabled JSX elements, and also a function that can be used to enable custom component receive chakra's style props.
Create base html elements with theme-aware style props using
notation. For example, if you want a plain html button with ability to pass
chakra styles, you can write
This reduces the need to create custom component wrappers and name them. This syntax is available for common html elements. See the reference for the full list of elements supported.
This is a function that converts non-chakra components or jsx element to chakra-enabled components so you can pass style props to them.
Consider a package called
react-input-autoresize, let's use the chakra factory
function to make possible to pass style props.
The function will infer the prop types from the wrapped component and also add chakra style props.
Considering that Chakra uses
emotionunder the hood, ensure the non-chakra component accepts
classNameas props for this to work correctly
In some instances, you might need to attach specific styles to the component wrapped in the chakra factory
You can also use the chakra factory on jsx elements as well.