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.
I tried adding styles.scss from @import "~@progress/kendo-theme-default/scss/all"; with .sample { font-size: 40px; } and appending the sample class to the body element of the page:
<div [ngClass]="{sample: (boolVar == true)}">
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?
Much appreciated for any response.
To override the styles in the element you first need to add the !important flag to your styling.
Furthermore, for this styling to penetrate into the Angular components you need to use /deep/.
You also need to add the wildcard selector * to apply the style to all elements under .sample.
Try this:
/deep/ .sample * { font-size: 40px !important; }
FYI:
/deep/ should be replaced sometime with a better solution. In the mean time this is the only available option.
If on some element there already is a font-size styling with the !important flag, your style will be overridden by it.
p.s. This setting will apply the same font-size to all elements, no matter where they are. I'm not sure it's what you really want in your application...
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments