fix(mui): subForm use makeStyles

Author: rvsia

packages/mui-component-mapper/src/files/sub-form.js

@@ -1,13 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import { useFormApi } from '@data-driven-forms/react-form-renderer';
 
-const SubForm = ({ fields, title, description, FormSpyProvider: _FormSpyProvider, validate: _validate, ...rest }) => {
+const useStyles = makeStyles(() => ({
+  grid: {
+    paddingRight: 0,
+    paddingLeft: 0
+  }
+}));
+
+const SubForm = ({ fields, title, description, ...rest }) => {
   const { renderForm } = useFormApi();
+  const classes = useStyles();
+
   return (
-    <Grid item xs={12} container style={{ paddingRight: 0, paddingLeft: 0 }} {...rest}>
+    <Grid item xs={12} container className={classes.grid} {...rest}>
       {title && (
         <Grid item xs={12}>
           <Typography variant="h5">{title}</Typography>
@@ -28,9 +38,7 @@ const SubForm = ({ fields, title, description, FormSpyProvider: _FormSpyProvider
 SubForm.propTypes = {
   fields: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   title: PropTypes.string,
-  description: PropTypes.string,
-  FormSpyProvider: PropTypes.any,
-  validate: PropTypes.any
+  description: PropTypes.string
 };
 
 export default SubForm;