How to override Ionic2 sass variable just in one page?

Question

I tried to override sass variable in variables.css like this

but it's not what I want.

It seems to change the styles of all tabs.

Answer 1

You just need to do as shown below on the page component which you need to apply.

my.scss

.ios,
.md,
.wp {
    page-my {
        .margin-top-15 {
            margin-top: 15px;//this is just an example
        }

    }
}

Answer 2

Currently, it is not possible to override a sass variable in one single page, it simply does not work.

This is the response to a similar issue reported in ionic forums:

https://github.com/ionic-team/ionic/issues/7469

One useful solution is to ionic serve your project, open the inspector on your browser, inspect the desired element and see its ionic generated classes to overwrite them manually in the .scss file.

Answer 3

Currently you cannot change sass variables in one page. That's just not how sass works. Sass is meant to be used as a global setting.

There is a work around to change let's say for example the background of a loading container.

You can do this for most.

If you open developer tools and select inspect element on the loading wrapper it gives the class .loading-wrapper as shown in image link below.

css class for loading shown in inspect element

In your app.css

 .loadingCss {

  .loading-wrapper {
    color: #f4f4f4;
    background: #2979ff;
  }
}

in your component ts add the class to your loading create instance

    //initialize a loading overlay
let working = this.loadingCtrl.create({
  content: 'Working...',
  spinner: 'dots',
  cssClass: 'loadingCss'
});

Now you can create multiple instances of loading and have separate classes for loading and add them to your instance and the css will take effect.

Final result is shown in the below image link.

Loading overlays with custom css on two pages

I hope this helps