7

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?

Lucio Zenir
  • 365
  • 2
  • 8
  • 18

3 Answers3

6

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);
arturgspb
  • 1,004
  • 1
  • 12
  • 19
  • 1
    Great news! I returned to this question after a notification that my answer had been downvoted .... with fair reason! – tin Aug 18 '19 at 19:01
4

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

Angelotti
  • 673
  • 1
  • 6
  • 20
0

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

Community
  • 1
  • 1
tin
  • 137
  • 1
  • 8
  • 1
    Link only answers are not allowed on SO as links go dead or change over time. However, you can use that information to compliment and form your own answer. If you can't do that, you should delete this altogether. https://stackoverflow.com/help/how-to-answer – Rob Dec 20 '18 at 14:16
  • Thank you. The answer is "officialy React-JSONSchema-Forms wont support this". The links were just addendum – tin Dec 20 '18 at 17:45