Search⌘ K
AI Features
Home
Courses
Building Web Applications with React and ASP.NET Core

Creating a Reusable Styled Component with Emotion

Explore how to create reusable styled components in React with Emotion by styling various elements like buttons and page titles. Learn to center content and use tagged template literals for efficient styling. This lesson helps you enhance frontend design and reuse styles effectively in your React projects.

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:

NAME_
CSS
 /** @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:

NAME_
CSS
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 ...