Specify ionic component css class in page
<p>I am developing an application with <code>ionic 2</code> and <code>angular 2</code> and I use in it the <code>ionic 2</code> component <a href="http://ionicframework.com/docs/v2/components/#modals" rel="nofollow">ModalController</a>.  </p>

<p>I did not find a way or a configuration that changes the size of the <code>ModalController</code>. I want however to use it on deverse sizes, namely to specify a different size on each page I use it. It gets its size from <code>ionic 2</code> <code>css</code> class <code>modal-wrapper</code>. If I override the class or the global variables used to calculate the size, then this adjustment applies globally. In other words it is not modularized in the different pages. I have found that in <code>angular 2</code> one can apply style to each component individually:
<a href="https://angular.io/docs/ts/latest/guide/component-styles.html#!#using-component-styles" rel="nofollow">https://angular.io/docs/ts/latest/guide/component-styles.html#!#using-component-styles</a> </p>

<p>However that did not work in the case <code>modal-wrapper</code>. My questions are:</p>

<ol>
<li>Can one override a standard <code>ionic 2</code> class this way, or does it only pertain to <code>html tags</code>?</li>
<li>Can one apply <code>scss</code> rules this way? How? The <code>modal-wrapper</code> defines <code>scss</code> rules. </li>
</ol>