Integrating Chakra UI’s Input component with Blitz
Here’s a quick write-up for getting the https://blitzjs.com/ CLI for generating new models to work with Chakra UI.
We need to modify the LabeledTextFieldProps
class created by the CLI, to use Chakra’s Input
component instead of the stock one.
import { Input } from "@chakra-ui/react"
// Change the interface we extend to look like this
export interface LabeledTextFieldProps extends ComponentPropsWithoutRef<typeof Input>
// Locate the <input> line, and simply make the first character uppercase, like this:
<Input {...input} disabled={submitting} {...props} ref={ref} />