Question

我正在使用react-jsonschema-form做一个表单，但我真的想用Material-UI自定义我的应用程序（包括表单）。我无法同时使用它们，因为react-jsonchema-form使用uiSchema进行样式设置，Material-UI设置在prop上，如下所示：

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

<FormControl className={classes.formControl}>

如何使用Material-UI内的schema forms？

Answer 1

如果您想在材料UI中使用组件，我确实这样做了... 导入材料界面

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

声明常量和Costum小部件

          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,
        }

并返回我的组件

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

对我有用

Answer 2

现在您可以通过标准react-jsonschema-form库开始使用它！我搜索了很长时间，发现现在已经可以完成了。

此PR使用HOC进行了解释：https://github.com/mozilla-services/react-jsonschema-form/issues/1222

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

带有Material-ui组件的游乐场：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

看到那里没有答案很奇怪。

快速回答：你不能！

请查看project's FAQ，然后说：

问：react-jsonschema-form是否支持Material，Ant-Design，Foundation或[其他一些特定的小部件库或前端样式]？
答：可能不是。我们使用Bootstrap v3，它可以满足我们的需求。我们希望react-jsonschema-form支持其他框架，我们不想自己支持它们。理想情况下，这些前端样式可以添加到react-jsonschema-form与第三方库。

但是！ ...... :)不要这么快！

我最接近实现材料＆＃34;外观和感觉＆＃34;是使用Bootstrap主题，Paper by Bootswatch这是非常好的！

希望这有助于任何人

如何使用react-jsonschema-form和material-ui？

3 个答案: