Material-Ui buttons change style when showing form

General
1

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?

image
image1216Ă—789 24.4 KB

2

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?

3

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"
    }
  ]
}
4

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.

5

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

1 Like
6

Unsure if I should open a new one or not but I’m having this exact same problem and can’t seem to track down what I’m missing. I’ve got the following list of library imports and have the same blinking button colors. AFAIK I’m using the latest mui 5.x versions and json-forms 3.x versions.

“@json-forms/core”: “^3.0.0-gamma.3”,
“@json-forms/material-renderers”: “^3.0.0-gamma.3”,
“@json-forms/react”: “^3.0.0-gamma.3”,
“@mui/icons-material”: “^5.8.4”,
“@mui/material”: “^5.8.7”,
“@mui/system”: “^5.9.3”,

I’m loading this in a modal and everything not explicitly JsonForms loses all meaningful style with regards to any inputs/buttons etc that are on the underlying page. Note the below where buttons and inputs render with color/style when no JsonForms and then lose all styling with JsonForms

bitmap
bitmap794Ă—1123 48.6 KB

I’ve narrowed it down to when JsonForms loads, it appends a bunch of style templates to the head element that override everything else on the page. I’m just not sure how to tweak/change that or if that’s even intended. I’m fairly new to react so still picking up their theming rules but feel like I’m missing something here.

7

Hi @billysmt,

It seems you are consuming a fork of JSON Forms.

The official packages are: @jsonforms/core, @jsonforms/material-renderers, @jsonforms/react. You are consuming a fork which uses the namespace @json-forms. I don’t know what the content of the fork is and how it behaves.

I would therefore recommend switching to our official packages and try again. The latest released version is 3.0.0-rc.0.

8

thanks for the quick reply and clarification on my package/versioning. I missed it was a fork. I saw the 3.0.0 and thought maybe you’d re-packaged it since it had breaking changes as the github repo went to the official and not a fork.

After swapping back and getting webpack sorted out my issue is resolved.

1 Like