如何让禁用的 mat-tab 波纹或下划线出现

Question

我正在使用 Angular Material 进行项目的选项卡导航，并且我正在尝试设置我的 mat-tab 组件的样式以实现特定的设计。

当前设计与所需设计： 在此输入图片描述 当前设计（图 1）：非活动选项卡没有下划线。 所需设计（图 2）：我希望非活动选项卡下划线显示为深灰色，而活动选项卡下划线应保持亮绿色。

我尝试过使用 ::ng-deep 并检查了各种类，但未能达到预期的结果。这是我到目前为止所做的尝试：

`::ng-deep .mdc-tab-indicator__content--underline {
border-color: grey;
}`

我需要什么帮助： 如何确保非活动选项卡的下划线保持深灰色可见？ 我是否针对正确的类和元素来设计 mat-tab 样式？ Angular Material 中是否有任何最佳实践或替代方法来实现此设计？ 我一直在使用 Chrome DevTools 检查器和 ng-deep 来应用样式，但我没有得到预期的结果。

任何有助于实现此设计的指导或代码片段将不胜感激！

其他背景：

• 角度版本：17
• Angular Material 版本：最新 谢谢您的帮助！

我尝试使用 Angular Material 的 mat-tab-group 来设置选项卡组件的样式。我希望非活动选项卡下划线可见并具有深灰色，而活动选项卡应保持亮绿色。这是我目前的 SCSS 尝试：

scss

`::ng-deep .mat-mdc-tab-group .mat-mdc-tab {
// Custom styles for inactive tab underline
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #555555;  // Dark gray color for inactive tabs
opacity: 0.5;  // Tried to keep it visible
}
&.mdc-tab--active::after {
background-color: #00d36b;  // Green color for active tab
opacity: 1;
}
}`

我的期望： 我预计此 SCSS 将使非活动选项卡下划线保持为深灰色可见，如我的示例的第二张图片所示，其中非活动选项卡下划线具有一致的深灰色可见线。

实际发生的事情： 但是，非活动选项卡下划线仍然不可见或未按预期显示。活动选项卡的下划线正确更改为绿色，但非活动选项卡不保留我尝试应用的样式。我已经使用 ::ng-deep 来确保样式渗透 Angular 的 ViewEncapsulation，但仍然没有达到预期的结果。

我正在寻找指导，了解我是否针对正确的元素，以及 Angular Material 中是否有最佳实践来实现这种设计。

Answer 1

您可以使用下面的CSS，更喜欢

::before

，因为它允许活动颜色显示在灰色背景之上。

如果您使用

::after

，它会在选项卡之后呈现，因此选项卡会被灰色部分隐藏。

.mat-mdc-tab-label-container::before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: lightgray;
}

Stackblitz 演示