Change background-color of ion-content

Ionic Framework ionic-v3
2

Really?

Ok just use this as html, say the component or page is named masters, and it will render a list of pages, that simple:

<ion-content padding class="masters">
  <ion-list inset>
    <button ion-item *ngFor="#master of masterPages" (click)="navMaster(master)">
      {{master.title}}
    </button>
  </ion-list>
</ion-content>

Then in your scss you target the class in the ion-content tag:

.masters {
  background-color: green;
}

Lastly you make sure this scss is being compiled with your app.core.scss by importing it in that same file like:

@import "../pages/masters/masters";

Note: When creating components, pages or whatever with the ionic generate command it will add the class name in the html and create the scss file for you, which means this is the way the ionic team tough about style isolation, just make sure not to name another class in another component with the same name, it’s supposed to be a component class, if needed prefix the class like .admin-masters and/or .client-masters.

12 Likes