fix(404): properly style link

src/components/404LinkCorrection/index.tsx

@@ -1,6 +1,6 @@
 import { WindowLocation } from "@reach/router"
-import { Link } from "gatsby"
 import React, { FC, Fragment } from "react"
+import * as SC from "./styles"
 
 import { FileConnection } from "../../../generated/graphql"
 
@@ -104,9 +104,9 @@ export const PossibleCorrections: FC<IPossibleCorrections> = ({
         {displayArray.map((value, index) => {
           return (
             <li key={index}>
-              <Link to={`${basepath}${value.node.relativePath}`}>
+              <SC.StyledLink to={`${basepath}${value.node.relativePath}`}>
                 {value.node.relativePath}
-              </Link>
+              </SC.StyledLink>
             </li>
           )
         })}

src/components/404LinkCorrection/styles.tsx

@@ -0,0 +1,16 @@
+import { Link } from "gatsby"
+import styled from "styled-components"
+
+export const StyledLink = styled(Link)`
+  color: #0090d8;
+  font-weight: 700;
+  border-bottom: 2px solid;
+  text-decoration: none;
+  transition: color 0.3s;
+
+  &:hover,
+  &:focus {
+    color: #5dbbea;
+    transition: none;
+  }
+`