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.

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.

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: