1.5 Styles JSX

Author: serranoarevalo

components/NavBar.js

@@ -1,30 +1,27 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import styles from "./NavBar.module.css";
 
 export default function NavBar() {
   const router = useRouter();
   return (
     <nav>
       <Link href="/">
-        <a
-          className={`${styles.link} ${
-            router.pathname === "/" ? styles.active : ""
-          }`}
-        >
-          Home
-        </a>
+        <a className={router.pathname === "/" ? "active" : ""}>Home</a>
       </Link>
       <Link href="/about">
-        <a
-          className={[
-            styles.link,
-            router.pathname === "/about" ? styles.active : "",
-          ].join(" ")}
-        >
-          About
-        </a>
+        <a className={router.pathname === "/about" ? "active" : ""}>About</a>
       </Link>
+      <style jsx>{`
+        nav {
+          background-color: tomato;
+        }
+        a {
+          text-decoration: none;
+        }
+        .active {
+          color: yellow;
+        }
+      `}</style>
     </nav>
   );
 }

components/NavBar.module.css

@@ -4,7 +4,12 @@ export default function Home() {
   return (
     <div>
       <NavBar />
-      <h1>Hello</h1>
+      <h1 className="active">Hello</h1>
+      <style jsx>{`
+        a {
+          color: white;
+        }
+      `}</style>
     </div>
   );
 }