如何使用react-jsonschema-form和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

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

Answer 2

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 3

Weird to see there's no answer.

Quick answer: you cant!

Check out project's FAQ about that, it says:

Q: Will react-jsonschema-form support Material, Ant-Design, Foundation, or [some other specific widget library or frontend style]?

A: Probably not. We use Bootstrap v3 and it works fine for our needs. We would like for react-jsonschema-form to support other frameworks, we just don't want to support them ourselves. Ideally, these frontend styles could be added to react-jsonschema-form with a third-party library.

But ! ... :) don't go so fast!

The closest I have come to achieve a Material "look and feel" was to use a Bootstrap Theme, Paper by Bootswatch which is quite nice!

Hope this helps anyone