我正在使用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
?
答案 0 :(得分:2)
如果您想在材料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>
对我有用
答案 1 :(得分: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);
答案 2 :(得分:0)
看到那里没有答案很奇怪。
快速回答:你不能!
请查看project's FAQ,然后说:
问:react-jsonschema-form是否支持Material,Ant-Design,Foundation或[其他一些特定的小部件库或前端样式]?
答:可能不是。我们使用Bootstrap v3,它可以满足我们的需求。我们希望react-jsonschema-form支持其他框架,我们不想自己支持它们。理想情况下,这些前端样式可以添加到react-jsonschema-form与第三方库。
但是! ...... :)不要这么快!
我最接近实现材料&#34;外观和感觉&#34;是使用Bootstrap主题,Paper by Bootswatch这是非常好的!
希望这有助于任何人