Creating a reusable styled component with Emotion

In this section, we are going to learn how to create reusable styled components while styling the HomePage component. Let's carry out the following steps:

1. We will start with the Page component in Page.tsx and add the following lines to the top of the file:

   /** @jsxImportSource @emotion/react */
   import { css } from '@emotion/react';

2. Let's style the div element and place the page content in the center of the screen:

   export const Page = ({ title, children }: Props) => (
     <div
       css={css`
         margin: 50px auto 20px auto;
         padding: 30px 20px;
         max-width: 600px;
       `}
     >
       …
     </div>
   );

3. Let's move to HomePage.tsx and add the following lines to the top of the file:

   /** @jsxImportSource...