MUI/material-ui theme's ArrayFieldTemplate renders items in double grid container

[jroebu14]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

mui

Version

5.x

Current Behavior

For the MUI and material-ui themes, the ArrayFieldTemplate renders the ArrayFieldItemTemplate components inside of a grid container and those components also render a grid container. For custom themes that add default spacing to grid items, this can result in double negative spacing margins on the container which causes the field description text to be obscured.

The current grid structure in ArrayFieldTemplate:

ArrayFieldTemplate > grid-containter > grid-container(ArrayFieldItemTemplate)

Changing the ArrayFieldItemTemplate wrapper to a grid item fixes the issue:

ArrayFieldTemplate > grid-containter > grid-item(ArrayFieldItemTemplate)

Expected Behavior

The grid in ArrayFieldTemplate should be correctly rendered with the structure ArrayFieldTemplate > grid-containter > grid-item(ArrayFieldItemTemplate) so it is not possible for the ArrayFieldItemTemplate to create double negative margins and obscure the field description text.

Steps To Reproduce

1. Create a form with a schema that renders the ArrayFieldTemplate in a MUI or material-ui theme e.g.

        <Form
          schema={{
            "type": "array",
            "description": "Users who are authorized",
            "title": "Authorized Users",
            "items": [
              {
                "type": "string",
                "default": "user"
              }
            ],
            "additionalItems": {
              "title": "Additional Users",
              "type": "string"
            }
          }}
          validator={validator}
        />

2. Inspect the array field items wrapping container and notice the double grid container structure

Environment

- OS: Mac 13.5.1
- Node: 18.6.0
- npm: 9.5.1

Anything else?

CodeSandbox: https://codesandbox.io/p/sandbox/festive-benji-jt6tjv?file=/pages/index.tsx:17,34

How a fix would look rendered: