如何在Angular Nebular中自定义nb-action上下文菜单的文本颜色

方法1：通过全局主题变量配置（推荐） #

• 你之前的写法存在两个问题：一是主题变量注册必须写在全局styles.scss中，放在组件的SCSS文件内无法生效；二是用错了上下文菜单对应的主题变量，正确配置如下：

// 写在全局 styles.scss 文件顶部
$nb-themes: nb-register-theme((
  // 上下文菜单普通状态文本颜色
  context-menu-item-text-color: red,
  // 上下文菜单hover状态文本颜色
  context-menu-item-hover-text-color: red,
  // 按需也可添加背景色配置
  context-menu-item-background-color: #fff,
  context-menu-item-hover-background-color: #f5f5f5,
), default, default);

• 配置完成后重启开发服务即可生效，所有上下文菜单样式会统一修改，符合Nebular设计规范。

方法2：自定义类+局部样式修改（仅修改当前组件的上下文菜单） #

• 先给你的nb-action添加上下文菜单自定义类属性nbContextMenuClass，避免全局样式污染：

<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"
  nbContextMenuClass="custom-ctx-menu"
  nbButton
>{{ menuItems[5] }}<nb-icon icon="chevron-down-outline"></nb-icon></nb-action>

• 再在当前组件的SCSS文件中添加如下样式即可：

::ng-deep .custom-ctx-menu {
  .menu-item {
    color: red;
    &:hover {
      color: red;
    }
    a {
      color: red !important;
      &:hover {
        color: red;
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者h0nka