[docs] Migrate Links to emotion (#25303)

mui · Mar 13, 2021 · 7ec1e5e · 7ec1e5e
1 parent d781626
commit 7ec1e5e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 64 deletions.
diff --git a/docs/src/pages/components/links/Links.js b/docs/src/pages/components/links/Links.js
@@ -1,32 +1,28 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    ...theme.typography.body1,
-    '& > * + *': {
-      marginLeft: theme.spacing(2),
-    },
-  },
-}));
-
 export default function Links() {
-  const classes = useStyles();
   const preventDefault = (event) => event.preventDefault();
 
   return (
-    <div className={classes.root} onClick={preventDefault}>
+    <Box
+      sx={{
+        typography: 'body1',
+        '& > :not(style) + :not(style)': {
+          ml: 2,
+        },
+      }}
+      onClick={preventDefault}
+    >
       <Link href="#">Link</Link>
       <Link href="#" color="inherit">
         {'color="inherit"'}
       </Link>
       <Link href="#" variant="body2">
         {'variant="body2"'}
       </Link>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/links/Links.tsx b/docs/src/pages/components/links/Links.tsx
@@ -1,34 +1,28 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      ...theme.typography.body1,
-      '& > * + *': {
-        marginLeft: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 export default function Links() {
-  const classes = useStyles();
   const preventDefault = (event: React.SyntheticEvent) => event.preventDefault();
 
   return (
-    <div className={classes.root} onClick={preventDefault}>
+    <Box
+      sx={{
+        typography: 'body1',
+        '& > :not(style) + :not(style)': {
+          ml: 2,
+        },
+      }}
+      onClick={preventDefault}
+    >
       <Link href="#">Link</Link>
       <Link href="#" color="inherit">
         {'color="inherit"'}
       </Link>
       <Link href="#" variant="body2">
         {'variant="body2"'}
       </Link>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/links/UnderlineLink.js b/docs/src/pages/components/links/UnderlineLink.js
@@ -1,25 +1,24 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    ...theme.typography.body1,
-    '& > * + *': {
-      marginLeft: theme.spacing(2),
-    },
-  },
-}));
-
 export default function UnderlineLink() {
-  const classes = useStyles();
   const preventDefault = (event) => event.preventDefault();
 
   return (
-    <div className={classes.root} onClick={preventDefault}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        typography: 'body1',
+        '& > :not(style) + :not(style)': {
+          ml: 2,
+        },
+      }}
+      onClick={preventDefault}
+    >
       <Link href="#" underline="none">
         {'underline="none"'}
       </Link>
@@ -29,6 +28,6 @@ export default function UnderlineLink() {
       <Link href="#" underline="always">
         {'underline="always"'}
       </Link>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/links/UnderlineLink.tsx b/docs/src/pages/components/links/UnderlineLink.tsx
@@ -1,27 +1,24 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      ...theme.typography.body1,
-      '& > * + *': {
-        marginLeft: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 export default function UnderlineLink() {
-  const classes = useStyles();
   const preventDefault = (event: React.SyntheticEvent) => event.preventDefault();
 
   return (
-    <div className={classes.root} onClick={preventDefault}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        typography: 'body1',
+        '& > :not(style) + :not(style)': {
+          ml: 2,
+        },
+      }}
+      onClick={preventDefault}
+    >
       <Link href="#" underline="none">
         {'underline="none"'}
       </Link>
@@ -31,6 +28,6 @@ export default function UnderlineLink() {
       <Link href="#" underline="always">
         {'underline="always"'}
       </Link>
-    </div>
+    </Box>
   );
 }