fix(mui): useStyles in buttonGroup

Author: rvsia

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

@@ -1,9 +1,17 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { Grid, Button as MUIButton, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import FormTemplate from '@data-driven-forms/common/src/form-template';
 
+const useStyles = makeStyles(() => ({
+  buttonGroup: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  }
+}));
+
 const Form = ({ children, ...props }) => <form {...props}>{children}</form>;
 const Description = ({ children }) => (
   <Grid item xs={12}>
@@ -19,7 +27,11 @@ const Title = ({ children }) => (
     </Typography>
   </Grid>
 );
-const ButtonGroup = ({ children }) => <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{children}</div>;
+const ButtonGroup = ({ children }) => {
+  const classes = useStyles();
+  return <div className={classes.buttonGroup}>{children}</div>;
+};
+
 const Button = ({ label, variant, children, buttonType, ...props }) => (
   <MUIButton color={variant} variant="contained" {...props}>
     {label || children}