How do I prevent my styles from being applied to all pages?


I’m new to ionic. How do I prevent my styles from being applied to all pages? For example, on my join page, I give ion-input a background color of red. Why does ion-input get a red background on my login page. I only edited one scss file, and that’s login.scss.


if you are using v2, the Sass files allow you to nest within the selector element

some-selector {
    ion-input {
          background: red;

The selector will be your component wrap.


I tried that and the background-color is not being applied at all. This is at the top of my login.scss file

page-login {
 	ion-input {
 		background-color: red !important;


I don’t know if that’s how you target ion-input elements, you would have to inspect that. Try something else just to see if it is going through like a div or h1 tag.


btw I had a similar issue last night where my sass wasn’t compiling. The only things I did were update my npm to the lastest, run ionic serve, then ran ionic lab and it’s working again as of today.


I can’t target any element when I place it within page-login { }


Fixed, my fault. I had

page-login {

at the top of both login.scss and join.scss lol.

I changed it to

page-join {

in join.scss and now the styles I make here are only applied on my join page.


I’m hearing contradictory things:

Join and login are two different pages, yes?


Yes correct and each page had its own .scss file.