menu item color by default goes black

src/app/app.component.html

@@ -1,9 +1,10 @@
-<kendo-appbar *ngIf='login' class='appbar' [position]="'top'" [positionMode]="'sticky'">
+<kendo-appbar id='topBar' *ngIf='login' class='appbar' [position]="'top'" [positionMode]="'sticky'">
   <kendo-appbar-section>
     <kendo-menu [items]="items" (select)="onSelect($event)"> 
-      <ng-template kendoMenuItemTemplate let-item="item">
-        <fa-icon  *ngIf="menuItemHasFontawesome(item)"  [icon]="item.fa"></fa-icon> &nbsp;
-        {{ item.text }} 
+      <ng-template kendoMenuItemTemplate let-item="item" >
+        <span class='main-menu-item'>
+          <fa-icon  *ngIf="menuItemHasFontawesome(item)" [icon]="item.fa"></fa-icon> &nbsp;
+        {{ item.text }}  </span>
       </ng-template>
     </kendo-menu>
   </kendo-appbar-section>

src/app/app.component.scss

@@ -22,4 +22,12 @@
 .appbar,
 .k-appbar-sticky{
     z-index: 1000;
-}
+}
+
+#topBar .main-menu-item , #topBar .k-icon {
+    color:black !important; 
+}
+
+.k-menu:not(.k-context-menu) > .k-item > .k-state-active {
+    background-color: lightblue; 
+}

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { LoanEditComponent } from './loan-edit/loan-edit.component';
 
@@ -9,7 +9,8 @@ import { MenuService } from './service/menu.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit , OnDestroy {
   title = 'SFM broker';