Incorporating the Wrapper and Style Sheet

Previously, we created the menu (Menu) and navigation bar (Nav) templates. However, we must create a wrapper to use these templates as a single entity in creating custom components of our front-end application. With a wrapper object, we can maximize code reusability and consistency. Also, we need to style our front-end application for a better appearance.

A wrapper can be understood as a new version of an object or class already in existence. It has all the properties of the existing object or class but gives a better appearance and more flexibility. If passed as a prop, it can wrap around a group of components. This is known as having children inside a component.

A style sheet lets us change the appearance of our application by allowing us to apply and assign features to an HTML or XML file, which produces an attractive graphic user interface. As such, we can make all the appearance changes we want to the HTML or XML file and then see the result in our interface's appearance. These appearance changes include, but are not limited to, changing the background or text color and creating attractive images, boxes, text, and animations.

Creating the Wrapper component

To create a wrapper with the Menu and Nav templates for our custom components, we'll create a folder inside the src folder of our project directory named config. Inside this folder, we create a file called Wrapper.tsx, and add the following lines of code: