search

rjsf-team / react-jsonschema-form

A React component for building Web forms from JSON Schema.
https://rjsf-team.github.io/react-jsonschema-form/
Apache License 2.0
14.17k stars 2.18k forks source link

Question on how to theme using Pure-CSS #3735

Open aamedina opened 1 year ago

aamedina commented 1 year ago

Prerequisites

What theme are you using?

core

What is your question?

I would like to use react-jsonschema-form in my ClojureScript app via reagent (React) and create a theme that uses Pure-CSS instead of Bootstrap or the other JavaScript frameworks. Is this feasible? I'm not much of a JavaScript developer so I am unsure exactly how to proceed, and maybe this should be a feature request instead of a question. After reading the documentation it seems there are different ways to override the layout, including widgets, templates, and themes. I just want the HTML components created by the library to use the Pure-CSS classes and not have to manually override it via uiSchema for each form instantiation.

Here is the documentation for Pure-CSS. https://purecss.io/forms/

For example, I want all of the buttons to have the class "pure-button" instead of the Bootstrap classes. I imagine the way to do this is with a custom theme that overrides the widgets, but then the template stuff confused me. What will I be missing if I customize via a theme vs template?

Thanks for your help and work on this library.

nickgros commented 1 year ago

@aamedina if you've not seen it, the table on this page gives an overview of fields vs templates vs widgets. Custom themes use a combination of these custom components to provide a cohesive experience.

To have the form "feel" like it is 100% PureCSS you would likely need to use a combination of widgets (form controls) and templates (form layout). You probably wouldn't need to modify any of the Field components. I don't think any of our maintained themes modify Field components today.

I'd recommend looking at how some of the existing themes have been written to get an idea of what might be required. I'd also note that most themes don't override all widget/template types, in which case the fallback component is just the one defined in @rjsf/core.

While us maintainers today don't have time to work on this, we would be happy to review pull requests and provide guidance on adding a new theme to the repo, if you are interested in contributing to this project.

aamedina commented 1 year ago

Thank you for the information. After I figure out a satisfactory solution for theming for PureCSS + RJSF I would certainly be happy to contribute it, modelling the contribution after an existing module. As I am working in ClojureScript I would first need to figure it out for my project and then "translate" the equivalent components into the standardized model you are using and contribute that. Thanks again!