Styling in React with styled-components

So far, we've been using CSS files to add styling to our React components. However, this forces us to import these files across different components, which makes our code less reusable. Therefore, we'll add the styled-components package to the project, which allows us to write CSS inside JavaScript (so-called CSS-in-JS) and create components.

By doing this, we'll get more flexibility out of styling our components, be able to prevent the duplication or overlapping of styles due to classNames, and add dynamic styling to components with ease. All of this can be done using the same syntax we used for CSS, right inside our React components.

The first step is installing styled-components using npm:

npm install styled-components

Note

If you look at the official documentation of styled-components, you will notice that they strongly advise you to use the Babel plugin for this package as well. But since you're using Create...