React-jsonschema-form: UISchema classNames do not work with material-ui theme

Created on 1 May 2020 · 2Comments · Source: rjsf-team/react-jsonschema-form

Prerequisites

[x] I have read the documentation;
[x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
[x] 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

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/.