如何使用PrimeNG实现Angular Material风格的带标签页对话框

完全可以通过PrimeNG实现你要的Angular Material风格带标签页对话框效果，PrimeNG的TabView组件支持高度自定义样式，只需调整模板配置和覆盖默认CSS即可。

第一步：调整模板配置 #

移除p-tabView上不必要的[controlClose]属性（该属性用于开启标签关闭功能，你当前需求不需要），同时给p-dialog新增[contentStyle]配置，取消对话框内容区的默认内边距，让标签栏可以通栏展示：

<p-dialog [(visible)]="displayDialog" (onHide)="cancel()" [style]="{width: '50vw'}" [baseZIndex]="10000" [contentStyle]="{padding: 0}">
  <p-tabView>
    <p-tabPanel header="Header 1">Text 1</p-tabPanel>
    <p-tabPanel header="Header 2">Text 2</p-tabPanel>
    <p-tabPanel header="Header 3">Text 3</p-tabPanel>
  </p-tabView>
</p-dialog>

第二步：添加自定义样式覆盖默认主题 #

在组件样式文件中添加以下代码即可匹配Material风格的标签视觉效果，如果你的项目开启了组件样式隔离，不想使用::ng-deep语法，可以将样式去掉::ng-deep前缀后放到全局样式文件（通常为src/styles.css）中生效：

/* 移除TabView默认边框 */
::ng-deep .p-tabview {
  border: none;
  border-radius: 0;
}

/* 标签导航栏样式 */
::ng-deep .p-tabview-nav {
  border-bottom: 1px solid #e0e0e0;
  padding: 0 24px;
  background: #fff;
  margin: 0;
}

/* 单个标签基础样式 */
::ng-deep .p-tabview-nav li {
  margin: 0 24px 0 0;
  padding: 0;
}
::ng-deep .p-tabview-nav li .p-tabview-nav-link {
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
  padding: 16px 0;
  margin: 0;
  border-radius: 0;
}

/* 激活标签样式，加底部高亮下划线 */
::ng-deep .p-tabview-nav li.p-highlight .p-tabview-nav-link {
  color: #1976d2; /* 可替换为你项目的主题色 */
  border-bottom: 2px solid #1976d2;
  background: transparent;
}

/* 标签内容区内边距 */
::ng-deep .p-tabview-panels {
  padding: 24px;
  background: #fff;
}

你可以根据自己的设计需求调整颜色、间距等参数，实现完全匹配的视觉效果。

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