MUI Custom Styling

General
1

Is there any way to pass through custom props to the MUI controls used on a form?

For example, changing the mui prop margin to dense, or size to small, or variant to filled.

As an extension to that, passing an sx formatting prop to the form component? Ideally, I guess I would use the UISchema to do this? But I don’t know how?

Thanks (p.s. an example would be awesome).

s.

2

Hi @skavan,

Any prop which we don’t manually set within the JSON Forms material renderers can be easily adjusted from the outside using the Material UI theming default props support.

However variant is not one of these props as we are using more basic elements from Material UI. See this issue for more information.

3

Thanks for the quick reply - I guess I don’t understand how to apply the Material UI theming default props support to the JSON Forms world. Any chance you have a short example somewhere?

On the second point - I understand and I can live with that. density (margin) and sx are the most important ones for me. The MUI components are big screen real estate eaters…and especially on mobile, I like to keep things tighter.

4

To apply the Material UI theming you can check the first two code listings of the linked documentation

  1. Create a theme
  2. Wrap the JsonForms component (or a parent) in a ThemeProvider with your theme