Chakra-Ui theme does not seem to work

[DmacMcgreg]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

What theme are you using?

chakra-ui

Version

4.1.1

Current Behavior

Chakra-Ui ui options do not seem to do anything at all.
i've copied the example from the docs, both in the playground and locally, and it doesn't seem to do anything at all.

https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJmaXJzdE5hbWUiOiJDaHVjayIsImxhc3ROYW1lIjoiTm9ycmlzIiwiYWdlIjo3NSwiYmlvIjoiUm91bmRob3VzZSBraWNraW5nIGFzc2VzIHNpbmNlIDE5NDAiLCJwYXNzd29yZCI6Im5vbmVlZCJ9LCJzY2hlbWEiOnsidGl0bGUiOiJBIHJlZ2lzdHJhdGlvbiBmb3JtIiwiZGVzY3JpcHRpb24iOiJBIHNpbXBsZSBmb3JtIGV4YW1wbGUuIiwidHlwZSI6Im9iamVjdCIsInJlcXVpcmVkIjpbImZpcnN0TmFtZSIsImxhc3ROYW1lIl0sInByb3BlcnRpZXMiOnsiZmlyc3ROYW1lIjp7InR5cGUiOiJzdHJpbmciLCJ0aXRsZSI6IkZpcnN0IG5hbWUiLCJkZWZhdWx0IjoiQ2h1Y2sifSwibGFzdE5hbWUiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiTGFzdCBuYW1lIn0sInRlbGVwaG9uZSI6eyJ0eXBlIjoic3RyaW5nIiwidGl0bGUiOiJUZWxlcGhvbmUiLCJtaW5MZW5ndGgiOjEwfX19LCJ1aVNjaGVtYSI6eyJ1aTpvcHRpb25zIjp7ImNoYWtyYSI6eyJwIjoiMTByZW0iLCJjb2xvciI6ImJsdWUuMjAwIiwic3giOnsiYnV0dG9uIjp7ImJhY2tncm91bmQiOiJibHVlLjIwMCIsIm1hcmdpbiI6IjEwIGF1dG8ifSwibWFyZ2luIjoiMCBhdXRvIn19fSwiZmlyc3ROYW1lIjp7InVpOmF1dG9mb2N1cyI6dHJ1ZSwidWk6ZW1wdHlWYWx1ZSI6IiIsInVpOmF1dG9jb21wbGV0ZSI6ImZhbWlseS1uYW1lIn0sImxhc3ROYW1lIjp7InVpOmVtcHR5VmFsdWUiOiIiLCJ1aTphdXRvY29tcGxldGUiOiJnaXZlbi1uYW1lIn0sImFnZSI6eyJ1aTp3aWRnZXQiOiJ1cGRvd24iLCJ1aTp0aXRsZSI6IkFnZSBvZiBwZXJzb24iLCJ1aTpkZXNjcmlwdGlvbiI6IihlYXJ0aGlhbiB5ZWFyKSJ9LCJiaW8iOnsidWk6d2lkZ2V0IjoidGV4dGFyZWEifSwicGFzc3dvcmQiOnsidWk6d2lkZ2V0IjoicGFzc3dvcmQiLCJ1aTpoZWxwIjoiSGludDogTWFrZSBpdCBzdHJvbmchIn0sImRhdGUiOnsidWk6d2lkZ2V0IjoiYWx0LWRhdGV0aW1lIn0sInRlbGVwaG9uZSI6eyJ1aTpvcHRpb25zIjp7ImlucHV0VHlwZSI6InRlbCJ9fX0sInRoZW1lIjoiY2hha3JhLXVpIiwibGl2ZVNldHRpbmdzIjp7InZhbGlkYXRlIjpmYWxzZSwiZGlzYWJsZSI6ZmFsc2UsInJlYWRvbmx5IjpmYWxzZSwib21pdEV4dHJhRGF0YSI6ZmFsc2UsImxpdmVPbWl0IjpmYWxzZX19

Expected Behavior

No response

Steps To Reproduce

No response

Environment

No response

Anything else?

No response

[DmacMcgreg]

Is there any progress on this?
According to me, chakra-ui simply does not work at all.

Can anyone verify this?

[heath-freenome]

Can you explain what isn't working? In the example you show things appear to work just fine. I noticed that you have added props to the ui:schema (and datat) for fields that do not exist in the schema, so it makes sense that they are not showing up in the ui. Feel free to come to the weekly meeting on Fridays at 11am Eastern Time to share with us why you believe it doesn't work.

[DmacMcgreg]

I'm just doing the same thing as what is shown in the docs, yet the example in the docs does not work.

https://react-jsonschema-form.readthedocs.io/en/latest/api-reference/themes/chakra-ui/uiSchema/

"The props are given to the parent component in the individual widget. To pass styles to the inner components, use the sx prop."

In my example, I have done the following:

"sx": {
  "button": {
    "background": "blue.200",
    "margin": "10 auto"
  },
  "margin": "0 auto"
}

Which means that it should pass background blue.200 to the button, but it does not.

It also doesn't seem to do anything with

"p": "10rem",
"color": "blue.200",

Perhaps you could explain what I'm doing wrong, or maybe the limitations of this tool, and what exactly should I expect to see based on the example provided in the docs?

[heath-freenome]

@jzander @rodrigofuentes As listed contributors, perhaps you understand how this is supposed to work?

[DmacMcgreg]

@jzander @rodrigofuentes
Any ideas?

[DmacMcgreg]

@heath-freenome
There doesn't seem to be any response on this one.
Maybe consider removing the feature if it just doesn't work?

[heath-freenome]

@DmacMcgreg After digging deeper I see the problem. First the ui:options are read on a per-field basis and are not applied globally. So in your example, if you want the submit button to be blue, you will have to actually use the submitButtonOptions documented here

I've updated your example apply in your ui:options to just the last name to show you it working here

[heath-freenome]

Hmmm, after reading the documentation, I can see why you got confused. We need to fix the documentation to be clearer.

[DmacMcgreg]

That's excellent that you figured it out @heath-freenome !
Thanks for that!
The only shortcoming I see now is being able to style the form button itself since that doesn't seem to work.

[heath-freenome]

There are two approaches, you can add your own by making it a child of <Form> or use the submitButtonProps.props per this documentation

[heath-freenome]

Fixed documentation

[DmacMcgreg]

There are two approaches, you can add your own by making it a child of <Form> or use the submitButtonProps.props per this documentation

So @heath-freenome I gave the submitButtonProps.props a whirl, but it doesn't seem to pick up the chakra options. I tried just about every variation I could think of:

https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJmaXJzdE5hbWUiOiJDaHVjayIsImxhc3ROYW1lIjoiTm9ycmlzIiwiYWdlIjo3NSwiYmlvIjoiUm91bmRob3VzZSBraWNraW5nIGFzc2VzIHNpbmNlIDE5NDAiLCJwYXNzd29yZCI6Im5vbmVlZCJ9LCJzY2hlbWEiOnsidGl0bGUiOiJBIHJlZ2lzdHJhdGlvbiBmb3JtIiwiZGVzY3JpcHRpb24iOiJBIHNpbXBsZSBmb3JtIGV4YW1wbGUuIiwidHlwZSI6Im9iamVjdCIsInJlcXVpcmVkIjpbImZpcnN0TmFtZSIsImxhc3ROYW1lIl0sInByb3BlcnRpZXMiOnsiZmlyc3ROYW1lIjp7InR5cGUiOiJzdHJpbmciLCJ0aXRsZSI6IkZpcnN0IG5hbWUiLCJkZWZhdWx0IjoiQ2h1Y2sifSwibGFzdE5hbWUiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiTGFzdCBuYW1lIn0sInRlbGVwaG9uZSI6eyJ0eXBlIjoic3RyaW5nIiwidGl0bGUiOiJUZWxlcGhvbmUiLCJtaW5MZW5ndGgiOjEwfX19LCJ1aVNjaGVtYSI6eyJ1aTpvcHRpb25zIjp7ImNoYWtyYSI6eyJwIjoiMTByZW0iLCJjb2xvciI6ImJsdWUuMjAwIiwic3giOnsiYnV0dG9uIjp7ImJhY2tncm91bmQiOiJibHVlLjIwMCIsIm1hcmdpbiI6IjEwIGF1dG8ifSwibWFyZ2luIjoiMCBhdXRvIn19fSwiZmlyc3ROYW1lIjp7InVpOmF1dG9mb2N1cyI6dHJ1ZSwidWk6ZW1wdHlWYWx1ZSI6IiIsInVpOmF1dG9jb21wbGV0ZSI6ImZhbWlseS1uYW1lIn0sImxhc3ROYW1lIjp7InVpOmVtcHR5VmFsdWUiOiIiLCJ1aTphdXRvY29tcGxldGUiOiJnaXZlbi1uYW1lIn0sImFnZSI6eyJ1aTp3aWRnZXQiOiJ1cGRvd24iLCJ1aTp0aXRsZSI6IkFnZSBvZiBwZXJzb24iLCJ1aTpkZXNjcmlwdGlvbiI6IihlYXJ0aGlhbiB5ZWFyKSJ9LCJiaW8iOnsidWk6d2lkZ2V0IjoidGV4dGFyZWEifSwicGFzc3dvcmQiOnsidWk6d2lkZ2V0IjoicGFzc3dvcmQiLCJ1aTpoZWxwIjoiSGludDogTWFrZSBpdCBzdHJvbmchIn0sImRhdGUiOnsidWk6d2lkZ2V0IjoiYWx0LWRhdGV0aW1lIn0sInRlbGVwaG9uZSI6eyJ1aTpvcHRpb25zIjp7ImlucHV0VHlwZSI6InRlbCJ9fSwidWk6c3VibWl0QnV0dG9uT3B0aW9ucyI6eyJvcHRpb25zIjp7ImNoYWtyYSI6eyJiZyI6ImJsdWUuNDAwIn19LCJ1aTpvcHRpb25zIjp7ImNoYWtyYSI6eyJiZyI6ImJsdWUuNDAwIn19LCJjaGFrcmEiOnsiYmciOiJibHVlLjQwMCJ9LCJwcm9wcyI6eyJkaXNhYmxlZCI6ZmFsc2UsImNsYXNzTmFtZSI6ImJ0biBidG4taW5mbyIsInVpOm9wdGlvbnMiOnsiY2hha3JhIjp7ImJnIjoiYmx1ZS40MDAifX0sImNoYWtyYSI6eyJiZyI6ImJsdWUuNDAwIn19LCJub3JlbmRlciI6ZmFsc2UsInN1Ym1pdFRleHQiOiJTdWJtaXR0dCJ9fSwidGhlbWUiOiJjaGFrcmEtdWkiLCJsaXZlU2V0dGluZ3MiOnsidmFsaWRhdGUiOmZhbHNlLCJkaXNhYmxlIjpmYWxzZSwicmVhZG9ubHkiOmZhbHNlLCJvbWl0RXh0cmFEYXRhIjpmYWxzZSwibGl2ZU9taXQiOmZhbHNlfX0=

I'm not completely sure what you mean by making it a child of

Do you have an example of that?

[heath-freenome]

Do you have an example of that?

https://react-jsonschema-form.readthedocs.io/en/latest/api-reference/form-props/#children