cssStyle not working in kendo-menu-item

[Dmitry]

cssClass not working in kendo-menu-item (cssStyle works)

HTML:

<kendo-menu>
  <kendo-menu-item text="1" cssClass="x">
    <kendo-menu-item text="1.1"></kendo-menu-item>
    <kendo-menu-item text="1.2"></kendo-menu-item>
  </kendo-menu-item>
</kendo-menu>
LESS:
.x {
  background-color: red;
}
Module:
import { MenusModule } from '@progress/kendo-angular-menu';

const telerikModules = [
  ...
MenusModule,
...
];

@NgModule({
imports: telerikModules,
exports: telerikModules,
})
export class TelerikModule {
}
 

[Georgi]

Hi Dmitry, 

Thank you very much for the details provided.

From what I understand from your question, you are experiencing issues when trying to bind the cssClass property to the MenuItemComponent and applying styling to the component via this property. Please, correct me if I misunderstood you. 

Having thoroughly examined the provided code snippet, I noticed that the encapsulation of the component is not being modified. What I would suggest is to set the encapsulation to ViewEncapsulation.None as this would allow the developer to modify the default styling of the component: 

encapsulation: ViewEncapsulation.None,

For your convenience, I am sending a StackBlitz demo that utilizes the cssClass property in order to modify the styling of the MenuItemComponent: 

https://stackblitz.com/edit/angular-gu8ybj?file=src%2Fapp%2Fapp.component.ts

I hope this answers your question. Let me know if you need additional assistance with this case. 

Regards,

Georgi

Progress Telerik