Overriding kendo CSS classes problem

[Hadas]

Hi,

I am trying to override a Kendo CSS class like in this example, only for a single angular component, but it doesnt work. 

https://stackblitz.com/edit/angular-6mrvks?file=app/upload.component.ts

styles: [`
kendo-upload .k-dropzone-hint {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
`],

Only when I override the classes in a general CSS file in my project, it works.

Any idea what can be the problem?

 

Thanks in advance

[Alex Gyoshev]

Hello Hadas,

Since the example disables Angular's ViewEncapsulation, the styles are applied to all components on the page. This is necessary in order to apply styles to an internal part of the upload component. To style a specific component, apply the styles through a CSS class or ID selector, like shown in the updated example.

Regards,
Alex Gyoshev
Progress Telerik

[Hadas]

That helped!

Thanks