Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Styling with the CSS File in Practice | Styling in React Apps
Mastering React

Styling with the CSS File in Practice

Let's practice by creating a card component consisting of three components. We aim to utilize different components and apply styles to make it visually appealing. We will proceed step by step to achieve this.

content

Before we begin, let's explore the functionality of the special prop called children, which enables us to pass components, elements, or text as child elements. Here's how it works:

The Container component includes a children prop, which will contain the Notification and Message components. Any content placed between the opening and closing tags of the Container component will be treated as its children.

The Container component has the following code:

Note

Simple props are explicitly defined and accessed using their specific names within a component. On the other hand, the children prop allows us to pass components, elements, or text as children to a component without explicitly defining a prop name. It represents the content between the opening and closing tags of the component.

We can start.

Step 1

We create all the necessary components: Container, UserImage and UserInfo. Let's build the entire app by incorporating these components inside the App component.

content

Example:

Step 2

Ensure that all the essential class names are added to the elements using the className attribute.

Step 3

Let's import the CSS file into the file that contains all the components. We do it in the top of the file.

Step 4

Lastly, we have the freedom to apply any styles as per our preferences.

Full app code:

Everything was clear?

Section 2. Chapter 6
course content

Course Content

Mastering React

Styling with the CSS File in Practice

Let's practice by creating a card component consisting of three components. We aim to utilize different components and apply styles to make it visually appealing. We will proceed step by step to achieve this.

content

Before we begin, let's explore the functionality of the special prop called children, which enables us to pass components, elements, or text as child elements. Here's how it works:

The Container component includes a children prop, which will contain the Notification and Message components. Any content placed between the opening and closing tags of the Container component will be treated as its children.

The Container component has the following code:

Note

Simple props are explicitly defined and accessed using their specific names within a component. On the other hand, the children prop allows us to pass components, elements, or text as children to a component without explicitly defining a prop name. It represents the content between the opening and closing tags of the component.

We can start.

Step 1

We create all the necessary components: Container, UserImage and UserInfo. Let's build the entire app by incorporating these components inside the App component.

content

Example:

Step 2

Ensure that all the essential class names are added to the elements using the className attribute.

Step 3

Let's import the CSS file into the file that contains all the components. We do it in the top of the file.

Step 4

Lastly, we have the freedom to apply any styles as per our preferences.

Full app code:

Everything was clear?

Section 2. Chapter 6
some-alt