求助：Angular中创建带accent色无复选框的类禁用mat-chip胶囊项

直接用mat-chip配合自定义样式就能实现你要的效果，避开mat-chip-option自带复选框的问题，同时精准控制accent色系的禁用外观：

最终实现代码 #

<mat-chip-set>
  <!-- 带禁用效果的accent配色胶囊项 -->
  <mat-chip 
    class="accent-disabled-chip" 
    disabled 
    *ngIf="inConfig"
  >
    edit mode
  </mat-chip>
</mat-chip-set>

对应的样式（CSS/SCSS） #

CSS版本（利用Angular Material的CSS变量）

.accent-disabled-chip[disabled] {
  /* 基于accent主色生成浅背景和半透明文字，模拟禁用感 */
  background-color: rgba(var(--mat-accent-color), 0.3);
  color: rgba(var(--mat-accent-color), 0.7);
  /* 禁用交互 */
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.8;
}

SCSS版本（更贴合Angular Material主题系统）

.accent-disabled-chip[disabled] {
  background-color: mat.get-color-from-palette($mat-accent, 100, 0.3);
  color: mat.get-color-from-palette($mat-accent, 700, 0.7);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.8;
}

为什么之前的尝试没生效？ #

• mat-chip-option默认会渲染复选框，即使设置disabled也无法隐藏（除非额外写样式去掉，但没必要绕路）；
• mat-chip-option的disabled状态颜色是主题的禁用色，不是accent色系；
• 你尝试的其他组件（按钮、卡片）和mat-chip的胶囊样式差异太大，不符合需求。

额外说明 #

如果不需要完全阻止交互（只是外观像禁用），可以去掉disabled属性和pointer-events: none，只保留颜色和opacity样式即可。

内容的提问来源于stack exchange，提问作者J.Doe