title: Kendo UI Angular 4 components override styles
body: <p>I have a requirement to change the font-size of the entire application when we click on an icon in the header. I am using all Kendo components.</p>
  
  <p>I tried adding <code>styles.scss</code> from <code>@import "~@progress/kendo-theme-default/scss/all";</code> with <code>.sample { font-size: 40px; }</code> and appending the <code>sample</code> class to the body element of the page:</p>
  
  <pre><code>&lt;div [ngClass]="{sample: (boolVar == true)}"&gt;
  </code></pre>
  
  <p>I could see the style sample added to the root element when I inspect it but I do not see any font changes in Kendo UI components... Could someone shed some light on this?</p>
  
  <p>Much appreciated for any response.</p>