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

Ionic Framework ionic-v3
1

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.

2

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.

3

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;
 	}
 }
4

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.

5

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.

6

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

7

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.

1 Like
8

I’m hearing contradictory things:

Join and login are two different pages, yes?

9

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