materialRenders breaks component styles

General
1

Hi!
I have the problem that when I place the material renders the button styles are broken.
Has anyone else had this happen or know how to fix it?

    "@jsonforms/core": "^2.5.2",
    "@jsonforms/material-renderers": "^2.5.2",
    "@jsonforms/react": "^2.5.2",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.1",

Schema

export const schemaEstadosCajasForm = {
  type: "object",
  properties: {
    id: {
      type: "string",
      title: "id",
      description: "Id",
    },
    detalle: {
      type: "string",
      title: "Detalle",
      description: "Ingresar detalle",
    },
  },
};

uiSchema


export const uischemaEstadosCajasForm = {
  type: "VerticalLayout",
  elements: [
    {
      type: "VerticalLayout",
      elements: [
        {
          type: "Control",
          scope: "#/properties/id",
        },
        {
          type: "Control",
          scope: "#/properties/detalle",
        },
      ],
    },
  ],
};

This is how the buttons without styles look, if I remove the materialRender it works again

image
image987×117 10.3 KB

2

Hi @JuanHeyda,

JSON Forms uses Material UI v4 which leads to problems when combined with Material UI v5. Please use the latest @next version of JSON Forms, i.e. 3.0.0-rc.0 which uses Material UI v5.

3

I tried it and it works! Thank you