uiSchema Options for Chakra-UI
When using @rjsf/chakra-ui
there are a couple of ways to customize the feel of the form.
Styling
You can use ChakraProvider
, where you can customize the components at a theme level.\
And, uiSchema
allows for the use of a "chakra"
"ui:option"
to customize the styling of the form widgets.
{
"ui:options": {
"chakra": {
"p": "1rem",
"color": "blue.200",
"sx": {
"margin": "0 auto"
}
}
}
}
It accepts the theme accessible style props provided by Chakra and Emotion.
Limitations
- The
chakra
option is only available for the Chakra-UI theme. - The props are given to the parent component in the individual widget. To pass styles to the inner components, use the
sx
prop.