1

I'm new to scss and Nebular. How do I style the text color of the nb-action context-menu items? Right now they are standard "hyperlink-blue".

I have tried adding this to the templates .scss:

  $nb-themes: nb-register-theme((
  text-primary-hover-color: red,
  menu-item-hover-text-color: red,
), default, default);

and this:

  ::ng-deep .menu-item {
    background-color: red;
    color: red;

    & a {
      background-color: red;
      color: red;
    }
  }

The menu looks like this in the template:

  <nb-action
  (click)="selected = [menuItems[5], '']"
    [ngClass]="{ 'ac-default': menuItems[5] !== selected[0], 'ac-selected': menuItems[5] === selected[0] }"
    [nbContextMenu]="getCtxMenuItems(menuItems[5])"
    nbContextMenuTrigger="hover"
    nbButton
  >{{ menuItems[5] }}<nb-icon icon="chevron-down-outline"></nb-icon></nb-action>

Thanks

h0nka
  • 11
  • 2

1 Answers1

0

the problem with styling nb-context-menu is that it is not rendered inside the components template but in another container .cdk-overlay-container, so it is not able to get templates styles.

an option might be to define the styles to the app level style.scss file

Ion Calancea
  • 1
  • 1