# How to customize the element style, eg height / margin

**URL:** <https://jsonforms.discourse.group/t/how-to-customize-the-element-style-eg-height-margin/2741>\
**Category:** General\
**Created:** [July 22, 2025, 2:00am UTC](https://jsonforms.discourse.group/t/how-to-customize-the-element-style-eg-height-margin/2741 "2025-07-22T02:00:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![coco](https://avatars.discourse-cdn.com/v4/letter/c/8797f3/32.png) [@coco](https://jsonforms.discourse.group/u/coco)\
**Post date:** [July 22, 2025, 2:00am UTC](https://jsonforms.discourse.group/t/how-to-customize-the-element-style-eg-height-margin/2741/1 "2025-07-22T02:00:58Z")

</div>

![image](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/2X/6/69da7d7e114c9b82498a03ab2439383fb0d7a80c.jpeg)

what best way to define the input element style ? eg height , currently it is default , height too large, I want change to small, but looks it no simple way to set it . I meaning set it from the uiSchema if possible . or anyway, other way also is good

thanks for guide

---

<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:** [July 22, 2025, 7:28am UTC](https://jsonforms.discourse.group/t/how-to-customize-the-element-style-eg-height-margin/2741/2 "2025-07-22T07:28:40Z")

</div>

In case you are using the React Material renderers, then you can use [Material UI’s theme support](https://mui.com/material-ui/customization/theming/). All Vanilla renderers can be customized via CSS directly, see their respective Readmes. Angular Material has its own [theming support](https://material.angular.dev/guide/theming). Vue Vuetify supports both [theming](https://vuetifyjs.com/en/features/theme/) as well as modifying Vuetify props via the ui schema.

---

<div class="post-metadata">

**Author:** ![coco](https://avatars.discourse-cdn.com/v4/letter/c/8797f3/32.png) [@coco](https://jsonforms.discourse.group/u/coco)\
**Post date:** [August 1, 2025, 2:26pm UTC](https://jsonforms.discourse.group/t/how-to-customize-the-element-style-eg-height-margin/2741/3 "2025-08-01T14:26:56Z")

</div>

> [@sdirix](#):
>
> Material UI’s theme support

possible use more simple way ? looks MUI is hard to use

---

<div class="post-metadata">

**Author:** ![coco](https://avatars.discourse-cdn.com/v4/letter/c/8797f3/32.png) [@coco](https://jsonforms.discourse.group/u/coco)\
**Post date:** [October 14, 2025, 10:55am UTC](https://jsonforms.discourse.group/t/how-to-customize-the-element-style-eg-height-margin/2741/4 "2025-10-14T10:55:48Z")

</div>

how to adjust the row height / maybe row spacing . through css ?

---

<div class="post-metadata">

**Author:** ![coco](https://avatars.discourse-cdn.com/v4/letter/c/8797f3/32.png) [@coco](https://jsonforms.discourse.group/u/coco)\
**Post date:** [October 14, 2025, 3:25pm UTC](https://jsonforms.discourse.group/t/how-to-customize-the-element-style-eg-height-margin/2741/5 "2025-10-14T15:25:53Z")

</div>

how to adjust the row height / maybe row spacing . through css ?

.MuiGrid-container{

row-gap: 20px !important;

height: 100px !important;

}