Building Web Applications with React and ASP.NET Core/

...

/

Creating a Reusable Styled Component with Emotion

Creating a Reusable Styled Component with Emotion

Learn how to create a reusable styling component with Emotion.

We'll cover the following...

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:

Press + to interact
 /** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

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

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

  1. Let’s move to HomePage.tsx and add the following lines to the top of the ...