This is literally one of the most supposed-to-be simple problem, but hard to apply in Ionic. I guess it’s because of complex structure of Ionic itself, though.
So, I will ask about it again this time.
How do we change the background-color of one particular page in Ionic 2 ?
I have found a way to change the whole page background-color by override it ($background-color) in the app.variables.scss. However, i still don’t get how can we do it to just one page ?
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.
You can simply use the CSS attribute selector to set styles for a specific state.
.pane[state$="tabs.facts"]{
background: green;
}
I do quite like this a solution, though it may be unconventional (I’m not sure). I have looked around for an “official” way to do this, but I did not find anything (forgive me if I’ve missed this somewhere).