UISchema classNames do not work with material-ui theme

[bwbroersma]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

UISchema classNames do not seem to work with the material-ui theme.

Steps to Reproduce

See this simple sample:
JSONSchema

{
  "properties": {
    "field": {
      "type": "string"
    }
  }
}

UISchema

{
  "classNames": "extraClass"
}

See the playgrounds

• with material-ui theme
• with default theme

Expected behavior

extraClass like in the default html output:

<form class="rjsf">
 <div class="form-group field field-undefined  extraClass">
  <fieldset id="root">
   <div class="form-group field field-string">
    <label class="control-label" for="root">
     field
    </label>
    <input class="form-control" id="root" label="field" placeholder="" type="text" value="">
   </div>
  </fieldset>
 </div>
 <div>
  <button type="submit" class="btn btn-info">
   Submit
  </button>
 </div>
</form>

Actual behavior

No extraClass in the material-ui html output:

<form class="rjsf">
 <div class="MuiFormControl-root MuiFormControl-fullWidth">
  <div class="MuiGrid-root jss5 MuiGrid-container MuiGrid-spacing-xs-2">
   <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12" style="margin-bottom: 10px;">
    <div class="MuiFormControl-root MuiFormControl-fullWidth">
     <div class="MuiFormControl-root MuiFormControl-fullWidth">
      <div class="MuiFormControl-root MuiTextField-root">
       <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" data-shrink="false" for="root" id="root-label">
        field
       </label>
       <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl">
        <input aria-invalid="false" id="root" name="" type="string" class="MuiInputBase-input MuiInput-input" value="">
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div>
  <button type="submit" class="btn btn-info">
   Submit
  </button>
 </div>
</form>

A simple code search shows no result for classnames in the path /packages/material-ui/src/.

Version

The current github pages version.

[bwbroersma]

Related to #1647

[hiitskiran]

If providing field level classNames is not yet supported for material UI, is there a work around until support is avaialble?

[DaVinciDataOps]

Maybe not a real workaround, but what about a wrapper around the schema with a separate schema set with only the display none fields. and then with submit, submitting the wrapped json?

[jsduffy]

Any updates on this?

[leonoheart]

I met the same problem when using material ui, and as a workaround, I put className into formContext props and make it out.

https://react-jsonschema-form.readthedocs.io/en/latest/api-reference/form-props/#formcontext

[yanhan569046480]

I met the same problem when using material ui, and as a workaround, I put className into formContext props and make it out.

https://react-jsonschema-form.readthedocs.io/en/latest/api-reference/form-props/#formcontext

Hi, can you give us some examples about solving field style problems with formContext?

[mrpintcom]

I've been poking around debugging and inside SchemaField.js, there is this section:

// See #439: uiSchema: Don't pass consumed class names to child components
  const field = (
    <FieldComponent
      ...
      uiSchema={{ ...uiSchema, classNames: undefined }}
      ...
    />
  );

With that, classNames will always be set to undefined when the any of the theme widgets are rendering. I don't know the reason why that was ever added and it seems like an anti-pattern to do it in this manner.

If uiSchema is passed along without modification, then something like this can be done in the themes TextWidget.tsx class:

className: uiSchema.classNames ? uiSchema.classNames : "",

At that point, the classNames passed into uiSchema would be attached to the element the theme creates - in this case <TextField> from material-ui would have the classNames you passed in.

Once you can pass classes in - you can use the normal useStyles/makeStyles paradigm:

const useStyles = makeStyles(muiTheme => ({
    halfWidth: {
        width: "50%"
    }
}));

function App() {

    const classes = useStyles();

    const uiSchema = {
        "basics": {
            classNames: "foobar", // a text based className can be passed
            "description": {
                classNames: classes.halfWidth, // or a material ui style can be used like this
                "ui:widget": 'textarea'
            }
        }
    }

I'd be willing to make a PR with these changes if I'm understanding everything correctly here.

[Ugolaf]

Has anyone investigated or solved the problem?

[benjaminbours]

Wow it's crazy such an important problem is still there for that long time! I'm gonna open a PR about it, I mean, it's the basic of such a theme library, to at least support the basic features of the form generator itself.

[heath-freenome]

Fixed in 5.x