Learning Ionic - Second Edition

Page-level overrides

We can take the same theming to the next level by applying different styles to the same component in two different pages. For instance, we will make a label look different in the About page and the Contact page. This is how we will achieve it.

In example13/src/pages/about/about.html, we will add a new label inside the ion-content section, as shown in the following code:

<ion-content padding>   <button ion-fab color="different">FAB</button>   <label>This is a label that looks different from the one on Contact Page</label> </ion-content>

We will add the required styles in example13/src/pages/about/about.scss, as shown in the following code:

page-about {     label {         border: 2px solid #FF5722;         background: #FF5722;     } }