如何修改Angular Material Tree激活与聚焦状态下的字体颜色

• 优先推荐给样式加上你的自定义tree类.example-tree提升选择器权重，避免被Material默认样式覆盖，两种修改场景如下：

1. 全局样式文件（styles.css/styles.scss）添加 #

直接把以下代码加到全局样式文件中即可生效：

/* 基础字体颜色你已经配置过，这里只加状态样式 */
/* 聚焦状态字体颜色 */
.example-tree .mat-tree-node:focus,
.example-tree .mat-tree-node.cdk-focused {
  color: #自定义聚焦颜色值; /* 例：#1890ff */
  outline: none; /* 可选：移除默认的聚焦外边框 */
}

/* 激活/选中状态字体颜色 */
.example-tree .mat-tree-node.active,
.example-tree .mat-tree-node.mat-tree-node-selected {
  color: #自定义激活颜色值; /* 例：#165DFF */
}

2. 组件私有样式文件添加 #

如果不需要全局生效，只想在当前使用Tree的组件内生效，需要用::ng-deep穿透Angular视图封装，配合:host避免全局污染：

:host ::ng-deep .example-tree {
  /* 聚焦状态字体颜色 */
  .mat-tree-node:focus,
  .mat-tree-node.cdk-focused {
    color: #自定义聚焦颜色值;
    outline: none;
  }

  /* 激活/选中状态字体颜色 */
  .mat-tree-node.active,
  .mat-tree-node.mat-tree-node-selected {
    color: #自定义激活颜色值;
  }
}

• 补充说明：如果你的激活状态是自行控制的，需要给.mat-tree-node节点绑定激活类，示例如下：

<div class="mat-tree-node" [class.active]="selectedNode === node">
  {{node.name}}
</div>

其中selectedNode是你组件中存储当前选中节点的变量。

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