如何将 react-jsonschema-form 与 material-ui 一起使用？

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

现在你可以开始使用标准的 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 组件的 Playground：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

奇怪的是看到没有答案。

快速回答：你不能！

查看项目的常见问题解答，它说：

问：react-jsonschema-form 是否支持 Material、Ant-Design、Foundation 或 [其他一些特定的小部件库或前端样式]？

答：可能不会。我们使用 Bootstrap v3，它可以很好地满足我们的需求。我们希望react-jsonschema-form支持其他框架，但我们只是不想自己支持它们。理想情况下，这些前端样式可以使用第三方库添加到react-jsonschema-form中。

但！... :) 别走那么快！

我最接近实现材质“外观和感觉”的是使用 Bootstrap 主题，Bootswatch 的 Paper，这非常好！

希望这对任何人都有帮助