Customizing styles

Leveraging material-ui and JSS used in react-admin

Author: victorkane

src/MyUrlField.js

@@ -1,8 +1,25 @@
 import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import LaunchIcon from '@material-ui/icons/Launch';
 
-const MyUrlField = ({ record = {}, source }) =>
-    <a href={record[source]}>
-        {record[source]}
-    </a>;
+const useStyles = makeStyles({
+    link: {
+        textDecoration: 'none',
+    },
+    icon: {
+        width: '0.5em',
+        paddingLeft: 2,
+    },
+});
+
+const MyUrlField = ({ record = {}, source }) => {
+    const classes = useStyles();
+    return (
+        <a href={record[source]} className={classes.link}>
+            {record[source]}
+            <LaunchIcon className={classes.icon} />
+        </a>
+    )
+};
 
 export default MyUrlField;