Transcript

Let's take a look at how to scan our application using Emotion. Do I think it's a great idea for App Writer? No, I don't, but I do think it's important that you understand if you are an Emotion fan, how it would work and the trade-offs that you're going to have because you can't use it using React Server components, but I do want you to understand how to

do it. So let's jump in and style it using Emotion. First thing I'm going to do is install the Emotion libraries. That would be Emotion Cache, Emotion React, and Emotion Style. Then as a development dependency, I'm going to add the required Babel extension. Now, 1 of the things that a motion does is it captures all of the CSS classes into a

registry. So what we need to do is create a registry component, we then add to our applications. First thing I'm going to do is go over here to our source directory and under app create a new registry. .Tsx file. And into there I'm going to add the definition for our motion registry. To be honest,

this is mostly a copy and paste from the emotion documentation. Then I'm going to bring that into our layout file and I'm going to wrap our children in it. All right let's give it a try just to make sure that works. And everything seems to be running

smoothly so that's good. I'm going to go over to our Visual Studio Code and we're going to start building off of page. So I'm going to bring in style, we're going to use style mainly for this. We're going to create styled components. I'm going to create 2 styled components, 1 for main and 1 for card. Those are to replace the main tag and the

interior div tag. I'm gonna leave that to you to do. I'll see you on the other side for my solution.

lesson

Styling with Emotion

Jack Herrington

Let's take a look at how to style our application using Emotion.

While it may not be the best choice for an App Router app, if you're an Emotion fan it's important to understand how it works and the trade-offs involved. Keep in mind that you can't use Emotion directly with React Server Components, but let's dive in and see how to style our app with Emotion.

Installing Emotion Libraries

First, let's install the Emotion libraries by running the following command:

pnpm add @emotion/cache @emotion/react @emotion/styled

Next, add the required Babel extension as a development dependency:

pnpm add -D @emotion/babel-plugin

Setting Up the Emotion Registry

Emotion captures all of the CSS classes into a registry. To set this up, we need to create a Registry component that we'll add to our application.

Create a new file called Registry.tsx inside the src/app directory and add the following code that is mostly from the Emotion documentation:

"use client";

import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

const EmotionRegistry = ({ children }: { children: React.ReactNode }) => {
  const [emotionCache] = useState(() => {
    const emotionCache = createCache({ key: "css", prepend: true });
    emotionCache.compat = true;
    return emotionCache;
  });

  useServerInsertedHTML(() => {
    return (
      <style
        data-emotion={`${emotionCache.key} ${Object.keys(
          emotionCache.inserted
        ).join(" ")}`}
        dangerouslySetInnerHTML={{
          __html: Object.values(emotionCache.inserted).join(" "),
        }}
      />
    );
  });
  if (typeof window !== "undefined") return <>{children}</>;

  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
};

export default EmotionRegistry;

Next, we'll bring the Registry component into our layout.tsx file and wrap our children with it:

import EmotionRegistry from "./Registry";

import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head />
      <body>
        <EmotionRegistry>{children}</EmotionRegistry>
      </body>
    </html>
  );
}

Now we can start the development server and check that there are no errors: