# MUI Custom Styling

**URL:** <https://jsonforms.discourse.group/t/mui-custom-styling/1408>\
**Category:** General\
**Created:** [March 28, 2023, 2:26am UTC](https://jsonforms.discourse.group/t/mui-custom-styling/1408 "2023-03-28T02:26:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![skavan](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/skavan/32/684_2.png) [@skavan](https://jsonforms.discourse.group/u/skavan)\
**Post date:** [March 28, 2023, 2:26am UTC](https://jsonforms.discourse.group/t/mui-custom-styling/1408/1 "2023-03-28T02:26:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [March 28, 2023, 9:03am UTC](https://jsonforms.discourse.group/t/mui-custom-styling/1408/2 "2023-03-28T09:03:58Z")

</div>

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](https://mui.com/material-ui/customization/theme-components/#default-props).

However `variant` is not one of these props as we are using more basic elements from Material UI. See [this issue](https://github.com/eclipsesource/jsonforms/issues/1797) for more information.

---

<div class="post-metadata">

**Author:** ![skavan](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/skavan/32/684_2.png) [@skavan](https://jsonforms.discourse.group/u/skavan)\
**Post date:** [March 28, 2023, 2:16pm UTC](https://jsonforms.discourse.group/t/mui-custom-styling/1408/3 "2023-03-28T14:16:19Z")

</div>

Thanks for the quick reply - I guess I don’t understand how to apply the [Material UI theming default props support](https://mui.com/material-ui/customization/theme-components/#default-props) 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.

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [March 29, 2023, 8:37am UTC](https://jsonforms.discourse.group/t/mui-custom-styling/1408/4 "2023-03-29T08:37:20Z")

</div>

To apply the Material UI theming you can check the first two code listings of the [linked documentation](https://mui.com/material-ui/customization/theme-components/#default-props)

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