Fix TypeScript fail

mui · Jun 1, 2019 · eee5762 · eee5762
1 parent 7c61993
commit eee5762
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 46 deletions.
diff --git a/docs/src/pages/components/buttons/GroupedButtons.js b/docs/src/pages/components/buttons/GroupedButtons.js
@@ -2,39 +2,26 @@ import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    width: '100%',
-    display: 'flex',
-  },
-  item: {
-    padding: theme.spacing(1),
-  },
-}));
 
 export default function GroupedButtons() {
-  const classes = useStyles();
-
   return (
-    <Grid container className={classes.root}>
-      <Grid item container>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+    <div>
+      <Grid container direction="column" alignItems="center" spacing={2}>
+        <Grid item xs={12}>
           <ButtonGroup size="small" aria-label="Small outlined button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup color="primary" aria-label="Outlined primary button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             color="secondary"
             size="large"
@@ -45,14 +32,14 @@ export default function GroupedButtons() {
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup variant="contained" size="small" aria-label="Small contained button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             variant="contained"
             color="primary"
@@ -64,7 +51,7 @@ export default function GroupedButtons() {
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             variant="contained"
             color="secondary"
@@ -77,6 +64,6 @@ export default function GroupedButtons() {
           </ButtonGroup>
         </Grid>
       </Grid>
-    </Grid>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/buttons/GroupedButtons.tsx b/docs/src/pages/components/buttons/GroupedButtons.tsx
@@ -2,41 +2,26 @@ import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      display: 'flex',
-    },
-    item: {
-      padding: theme.spacing(1),
-    },
-  }),
-);
 
 export default function GroupedButtons() {
-  const classes = useStyles();
-
   return (
-    <Grid container className={classes.root}>
-      <Grid item container>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+    <div>
+      <Grid container direction="column" alignItems="center" spacing={2}>
+        <Grid item xs={12}>
           <ButtonGroup size="small" aria-label="Small outlined button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup color="primary" aria-label="Outlined primary button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             color="secondary"
             size="large"
@@ -47,14 +32,14 @@ export default function GroupedButtons() {
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup variant="contained" size="small" aria-label="Small contained button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             variant="contained"
             color="primary"
@@ -66,7 +51,7 @@ export default function GroupedButtons() {
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             variant="contained"
             color="secondary"
@@ -79,6 +64,6 @@ export default function GroupedButtons() {
           </ButtonGroup>
         </Grid>
       </Grid>
-    </Grid>
+    </div>
   );
 }