How to use react-jsonschema-form with material-ui?

Question

I am doing a form using react-jsonschema-form, but i really want to customize my application (including the form) with the Material-UI. I am having trouble to use both together because react-jsonchema-form uses a uiSchema for styling and the Material-UI is set on a prop like this :

SimpleModal.propTypes = {
  classes: PropTypes.object.isRequired,
}; 

<FormControl className={classes.formControl}>

How can i use the Material-UI inside the schema forms?

Answer 1

Now you can start use it with standard react-jsonschema-form library! I searched for a long time and found that now it can already be done.

This PR explain using HOC: https://github.com/mozilla-services/react-jsonschema-form/issues/1222

GitHub: https://github.com/cybertec-postgresql/rjsf-material-ui

Playground with material-ui components: https://cybertec-postgresql.github.io/rjsf-material-ui/

import { withTheme } from 'react-jsonschema-form';
import { Theme as MuiTheme } from 'rjsf-material-ui';

const Form = withTheme(MuiTheme);

Answer 2

If you want use component in material UI i did like this... import material UI

        import TextField from '@material-ui/core/TextField'

declare constant and costum widgets

          const MyCustomWidget = props => {
          return (
            <TextField
              type="text"
              label="Name1"
              value={props.value}
              onChange={event => props.onChange(event.target.value)}
              margin="normal"
            />
          )
        }

        const widgets = {
          TextWidget: MyCustomWidget,
        }

and in the return of my component

        return (
          <div>
            {' '}
            <Form schema={schema1} widgets={widgets} >
              {/* this is for disable the button Submit of Form */}{' '}
            </Form>
          </div>

It works for me