Material-Ui buttons change style when showing form

When I use the material-ui form, the styling of the buttons changes (It seems to reset the styling of the buttons).

Is there a parameter to adjust this?

Hi @Yann, which version of the Material UI renderer set with which version of Material UI are you using? Are the buttons rendered within JSON Forms (i.e. custom renderers) or outside of JSON Forms?

I’m using following versions:

@jsonforms/core”: “^2.5.2”,
@jsonforms/examples”: “^2.5.2”,
@jsonforms/material-renderers”: “^2.5.2”,
@jsonforms/react”: “^2.5.2”,
@mui/icons-material”: “^5.2.5”,
@mui/material”: “^5.2.6”

Also, I’m using nextjs. I don’t use custom renderers, I just use following html:

<JsonForms
schema={props.schema}
uischema={props.uischema}
data={data}
renderers={materialRenderers}
cells={materialCells}
onChange={onChange}
/>

I have following json schema:

{
    "properties": {
        "id": {
            "type": "integer"
        },
        "name": {
            "type": "string"
        },
        "field_name":{
            "type": "string"
        },
        "table_id": {
            "type": "number"
        },
        "type": {
            "type": "string",
            "enum": [
                "String",
                "Text",
                "Int",
                "Float",
                "Double",
                "Date",
                "DateTime",
                "Boolean",
                "List"
              ]
        },
        "length":  {
            "type": "integer"
        },
        "precision":    {
            "type": "integer"
        }
    },
    "required": ["name", "field_name","table_id", "type", "length", "precision"]
}


 

and ui schema:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/id"
    },
    {
      "type": "Control",
      "scope": "#/properties/name"
    },
    {
      "type": "Control",
      "scope": "#/properties/field_name"
    },
    {
      "type": "Control",
      "scope": "#/properties/table_id"
    },
    {
      "type": "Control",
      "scope": "#/properties/type"
    },
    {
      "type": "Control",
      "scope": "#/properties/length"
    },
    {
      "type": "Control",
      "scope": "#/properties/precision"
    }
  ]
}

Hi @Yann,

@jsonforms/material-renderers in version 2.5.2 uses Material UI v4 which is incompatible to Material UI v5. Are you using both Material UI v4 and Material UI v5 on your page? Then I could imagine a lot of CSS issues.

I would like to suggest to update to the @next stream of JSON Forms, i.e. currently ^3.0.0-beta.0, in which the material renderers were updated to use Material UI v5.

Thank you, when I updated this corrected the css error. :grinning:

1 Like