fix: improved chakra-ui docs to fix rjsf-team#2863

heath-freenome · heath-freenome · commit f043f7ca2109 · 2022-09-19T10:21:36.000-07:00
- Updated `chakra-ui/uiSchema.md` to make it clear that the special `chakra` section of `ui:options` are on a per-field basis
diff --git a/docs/api-reference/themes/chakra-ui/uiSchema.md b/docs/api-reference/themes/chakra-ui/uiSchema.md
@@ -4,17 +4,19 @@ When using `@rjsf/chakra-ui` there are a couple of ways to customize the feel of
 
 ## Styling
 
-You can use `ChakraProvider`, where you can customize the components at a theme level.\
+You can use `ChakraProvider`, where you can customize the field components at a theme level.
 And, `uiSchema` allows for the use of a `"chakra"` `"ui:option"` to customize the styling of the form widgets.
 
 ```json
 {
-  "ui:options": {
-    "chakra": {
-      "p": "1rem",
-      "color": "blue.200",
-      "sx": {
-        "margin": "0 auto"
+  "yourField": {
+    "ui:options": {
+      "chakra": {
+        "p": "1rem",
+        "color": "blue.200",
+        "sx": {
+          "margin": "0 auto"
+        }
       }
     }
   }

Original file line number	Diff line number	Diff line change
@@ -4,17 +4,19 @@ When using `@rjsf/chakra-ui` there are a couple of ways to customize the feel of
`4`	`4`
`5`	`5`	`## Styling`
`6`	`6`
`7`		-You can use `ChakraProvider`, where you can customize the components at a theme level.\
	`7`	+You can use `ChakraProvider`, where you can customize the field components at a theme level.
`8`	`8`	And, `uiSchema` allows for the use of a `"chakra"` `"ui:option"` to customize the styling of the form widgets.
`9`	`9`
`10`	`10`	```json
`11`	`11`	`{`
`12`		`- "ui:options": {`
`13`		`- "chakra": {`
`14`		`- "p": "1rem",`
`15`		`- "color": "blue.200",`
`16`		`- "sx": {`
`17`		`- "margin": "0 auto"`
	`12`	`+ "yourField": {`
	`13`	`+ "ui:options": {`
	`14`	`+ "chakra": {`
	`15`	`+ "p": "1rem",`
	`16`	`+ "color": "blue.200",`
	`17`	`+ "sx": {`
	`18`	`+ "margin": "0 auto"`
	`19`	`+ }`
`18`	`20`	`}`
`19`	`21`	`}`
`20`	`22`	`}`