Handling styles, themes, and dark mode
Git branch
This section uses the https://github.com/PacktPublishing/Mastering-SharePoint-Development-with-the-SharePoint-Framework-/tree/chapter5/handling-styles-and-theme Git branch from the repository.
In this section, we’ll see how to handle styles and make our web part a little prettier for users. As a reminder, our customer wants the products to be displayed as tiles like this:
Figure 5.6 – Product tile
By default, SPFx handles CSS styles using Syntactically Awesome Style Sheets (SASS). To make it short, it makes the CSS writing process easier with a flexible syntax leveraging concepts such as variables, mixins, nested structures, and so on. It is a well-adopted framework for web development outside of SPFx.
Creating the SASS style sheet
We first start by writing our SASS code for the tile display in the PacktProductCatalog.module.scss file, like this:
.productList {
...
