[docs] Migrate Alert demos to emotion (#25074)

mui · Feb 23, 2021 · 4c01089 · 4c01089
1 parent 4682e63
commit 4c01089
Show file tree

Hide file tree

Showing 14 changed files with 128 additions and 208 deletions.
diff --git a/docs/src/pages/components/alert/ActionAlerts.js b/docs/src/pages/components/alert/ActionAlerts.js
@@ -1,22 +1,18 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Alert from '@material-ui/core/Alert';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
 export default function ActionAlerts() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: '100%',
+        '& > * + *': {
+          mt: 2,
+        },
+      }}
+    >
       <Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
       <Alert
         action={
@@ -27,6 +23,6 @@ export default function ActionAlerts() {
       >
         This is a success alert — check it out!
       </Alert>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/alert/ActionAlerts.tsx b/docs/src/pages/components/alert/ActionAlerts.tsx
@@ -1,24 +1,18 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Alert from '@material-ui/core/Alert';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      '& > * + *': {
-        marginTop: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 export default function ActionAlerts() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: '100%',
+        '& > * + *': {
+          mt: 2,
+        },
+      }}
+    >
       <Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
       <Alert
         action={
@@ -29,6 +23,6 @@ export default function ActionAlerts() {
       >
         This is a success alert — check it out!
       </Alert>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/alert/BasicAlerts.js b/docs/src/pages/components/alert/BasicAlerts.js
@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Alert from '@material-ui/core/Alert';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
 export default function BasicAlerts() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: '100%',
+        '& > * + *': {
+          mt: 2,
+        },
+      }}
+    >
       <Alert severity="error">This is an error alert — check it out!</Alert>
       <Alert severity="warning">This is a warning alert — check it out!</Alert>
       <Alert severity="info">This is an info alert — check it out!</Alert>
       <Alert severity="success">This is a success alert — check it out!</Alert>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/alert/BasicAlerts.tsx b/docs/src/pages/components/alert/BasicAlerts.tsx
@@ -1,27 +1,21 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Alert from '@material-ui/core/Alert';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      '& > * + *': {
-        marginTop: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 export default function BasicAlerts() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: '100%',
+        '& > * + *': {
+          mt: 2,
+        },
+      }}
+    >
       <Alert severity="error">This is an error alert — check it out!</Alert>
       <Alert severity="warning">This is a warning alert — check it out!</Alert>
       <Alert severity="info">This is an info alert — check it out!</Alert>
       <Alert severity="success">This is a success alert — check it out!</Alert>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/alert/DescriptionAlerts.js b/docs/src/pages/components/alert/DescriptionAlerts.js
@@ -1,22 +1,18 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Alert from '@material-ui/core/Alert';
 import AlertTitle from '@material-ui/core/AlertTitle';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
 export default function DescriptionAlerts() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: '100%',
+        '& > * + *': {
+          mt: 2,
+        },
+      }}
+    >
       <Alert severity="error">
         <AlertTitle>Error</AlertTitle>
         This is an error alert — <strong>check it out!</strong>
@@ -33,6 +29,6 @@ export default function DescriptionAlerts() {
         <AlertTitle>Success</AlertTitle>
         This is a success alert — <strong>check it out!</strong>
       </Alert>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/alert/DescriptionAlerts.tsx b/docs/src/pages/components/alert/DescriptionAlerts.tsx
@@ -1,24 +1,18 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Alert from '@material-ui/core/Alert';
 import AlertTitle from '@material-ui/core/AlertTitle';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      '& > * + *': {
-        marginTop: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 export default function DescriptionAlerts() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: '100%',
+        '& > * + *': {
+          mt: 2,
+        },
+      }}
+    >
       <Alert severity="error">
         <AlertTitle>Error</AlertTitle>
         This is an error alert — <strong>check it out!</strong>
@@ -35,6 +29,6 @@ export default function DescriptionAlerts() {
         <AlertTitle>Success</AlertTitle>
         This is a success alert — <strong>check it out!</strong>
       </Alert>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/alert/FilledAlerts.js b/docs/src/pages/components/alert/FilledAlerts.js
@@ -1,21 +1,17 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Alert from '@material-ui/core/Alert';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
 export default function BasicAlerts() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: '100%',
+        '& > * + *': {
+          mt: 2,
+        },
+      }}
+    >
       <Alert variant="filled" severity="error">
         This is an error alert — check it out!
       </Alert>
@@ -28,6 +24,6 @@ export default function BasicAlerts() {
       <Alert variant="filled" severity="success">
         This is a success alert — check it out!
       </Alert>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/alert/FilledAlerts.tsx b/docs/src/pages/components/alert/FilledAlerts.tsx
@@ -1,23 +1,17 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Alert from '@material-ui/core/Alert';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      '& > * + *': {
-        marginTop: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 export default function BasicAlerts() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: '100%',
+        '& > * + *': {
+          mt: 2,
+        },
+      }}
+    >
       <Alert variant="filled" severity="error">
         This is an error alert — check it out!
       </Alert>
@@ -30,6 +24,6 @@ export default function BasicAlerts() {
       <Alert variant="filled" severity="success">
         This is a success alert — check it out!
       </Alert>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/alert/IconAlerts.js b/docs/src/pages/components/alert/IconAlerts.js
@@ -1,23 +1,19 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Alert from '@material-ui/core/Alert';
 import CheckIcon from '@material-ui/icons/Check';
 import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
 export default function IconAlerts() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: '100%',
+        '& > * + *': {
+          mt: 2,
+        },
+      }}
+    >
       <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
         This is a success alert — check it out!
       </Alert>
@@ -31,6 +27,6 @@ export default function IconAlerts() {
       <Alert icon={false} severity="success">
         This is a success alert — check it out!
       </Alert>
-    </div>
+    </Box>
   );
 }