Submit button ignores custom CSS classes passed via ui:submitButtonOptions

[ewaldbenes]

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?

core

Version

4.2.0

Current Behavior

I want to customize the appearance of the submit button via passing custom CSS classes. I took the example from the docs to accomplish that.

"ui:submitButtonOptions": {
   "props": {
      "disabled": false,
      "className": "my-custom-class",
   },
    "norender": false,
    "submitText": "Submit"
  }
}

my-custom-class is never injected into the DOM.

I figured out that this line of code in file packages/core/src/components/widgets/SubmitButton.js

...
<button type="submit" {...submitButtonProps} className="btn btn-info">
...

causes the className property content always to be overwritten with btn btn-info which renders this property useless.

Am I right with my conclusion? If yes, should I provide a PR or how should we proceed on this?

Expected Behavior

Custom provided CSS classes should override all default or existing classes.

Steps To Reproduce

Happens always if schema contains customization for the submit button as described above.

Environment

- OS: Ubuntu 20.04
- Node: v16.15.0
- npm: 8.5.5

Anything else?

No response

[heath-freenome]

@ewaldbenes You are correct in your assessment. I encourage you to create a PR against the upcoming v5 release (in the rjsf-v5 branch). Ping me on the discord server if you need help

[heath-freenome]

This has been fixed in the v5 beta, see the 5.x migration guide