How do you make scss only apply to one page?

Ionic Framework ionic-v3
1

Hi there, (ionic 3.19.0)

i im used to have the same classes for styling in every page, so my root div on a page always has class=“maincontainer” and so on.

with ionic the code of .maincontainer{} in the different pages overlap.

is there a way to change this behaviour ? :slight_smile:

i know i could add things like page1-maincontainer page2-maincontainer,
but this becomes quite frustrating easily :slight_smile:

thanks to everybody :slight_smile:

1 Like
2

If I’m not saying something wrong, I think that’s the purpose of the selector

my-page.ts

// Define a `selector`
@Component({
  templateUrl: 'my-page.html',
  selector: 'my-page' 
})
export class MyPage {
}

my-page.scss

// Here encapsulate the css dedicated to your page with the
// selector you defined in your class
my-page {
    .maincontainer {
      color: red;
   }
}
2 Likes
3

Wow, thank you so much :slight_smile: im glad it is that easy and customizable :slight_smile: best solution ever :slight_smile: thanks again :slight_smile:

1 Like
4

My pleasure, have fun!

1 Like