Support extra material ui options for fields

[dekelb]

Material-UI's form fields support more UI configurations, but those config settings are not exported to the user with the current widgets.
For example - if you look at the current implementation of the RangeWidget you can see the following:

<Slider
    {...sliderProps}
    disabled={disabled || readonly}
    onChange={_onChange}
    onBlur={_onBlur}
    onFocus={_onFocus}
/>

MateriaUI's Slider component support also properties, such as marks/scale/orientation/valueLabelDisplay and others.
This is just an example for the Slider widget, but other widgets will probably have other properties that we would like to support.

There are multiple ways to solve this, I think it's best to do this from the uiSchema (since it's not related to the schema itself).

My suggestion is to have ui:props in the uiSchema of the field, and pass these values to the field itself.

I'm happy to open a PR for this, in case it makes sense.

[cosmin-harangus]

We started using react-jsonschema-form with Material UI recently and we also noticed that extra properties supported by default in Material UI. Specifically in our case we needed the "className" property.

Also I could not find a working example of how to have the same setup as on https://cybertec-postgresql.github.io/rjsf-material-ui/ because in our case passing format: "email" to a string type would not render using the TextField from MUI.

[dekelb]

@epicfaace thanks for tagging this. what do you think about my suggestion on the solution?
I see that you are one of the main contributors to this repo. If you feel my suggestion could work I'm happy to open a PR for it.

If you think we should take a different approach here - let me know and I can think of some other options.

[juliankigwana]

We started using react-jsonschema-form with Material UI recently and we also noticed that extra properties supported by default in Material UI. Specifically in our case we needed the "className" property.

Also I could not find a working example of how to have the same setup as on https://cybertec-postgresql.github.io/rjsf-material-ui/ because in our case passing format: "email" to a string type would not render using the TextField from MUI.

I found a way to do this by overriding the TextFieldWidget locally with one that passes in the type. However, as you say @dekelb , there are a number of config settings that are no being handled correctly and that solution only resolves that particular case.

[epicfaace]

@dekelb thanks for noting this issue. I'm good with your suggestion, but just wondering about the semantics of it. I'm wondering whether to define custom options for each setting in ui:options (which is the approach we already take with widgets for the default theme) or allow people to add in arbitrary props with ui:props .

[zlove]

@epicfaace @dekelb I'd suggest that any solution also allows passing props to Template components. For instance, I'd like to pass props to an ArrayFieldTemplate to control, for example, the label width, or whether to use a vertical or horizontal layout a row of fields, etc.

This comment is related.

[jsduffy]

This would be really helpful for our project as well