Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to override submit button's class of the generated form? #2979

Closed
1 task done
HHOSSAIN opened this issue Aug 1, 2022 · 5 comments
Closed
1 task done

How to override submit button's class of the generated form? #2979

HHOSSAIN opened this issue Aug 1, 2022 · 5 comments

Comments

@HHOSSAIN
Copy link

HHOSSAIN commented Aug 1, 2022

Prerequisites

What theme are you using?

material-ui

What is your question?

I am trying to modify the <style> element in the header where data-mata="MuiButtonBase". I know for the attributes of the form, we can make styling changes like "padding" using ObjectFieldTemplate but what about the "submit" button? Can we make padding changes to it? If so, what should I use?

@HHOSSAIN HHOSSAIN added needs triage Initial label given, to be assigned correct labels and assigned question labels Aug 1, 2022
@heath-freenome
Copy link
Member

@HHOSSAIN See this section of the uiSchema documentation

@HHOSSAIN
Copy link
Author

HHOSSAIN commented Aug 2, 2022

@heath-freenome As stated here as well #2868 , the "Submit" button ignores the css classnames that I add here under "ui:submitButtonOptions". So, this is not letting me change the padding from 0 to 2 of <style> element of the header in data-mata="MuiButtonBase" .
I resolved it using a button from mui to replace the provided button.

@heath-freenome
Copy link
Member

You can wrap your custom button with the Form and it will replace the submit button with that content. I.e.

<Form schema={schema}>
  <button type="submit" classname="your classname">Submit</button>
</Form>

@heath-freenome
Copy link
Member

Also, in the upcoming rjsf v5 beta, the way the classes are added to SubmitButton will be fixed to support your use case.

@heath-freenome heath-freenome added awaiting response and removed needs triage Initial label given, to be assigned correct labels and assigned labels Aug 24, 2022
@heath-freenome
Copy link
Member

Fixed in the v5 beta, see the 5.x migration guide

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

When branches are created from issues, their pull requests are automatically linked.

4 participants