css - 如何删除 Angular Material mat-ink-bar？

Question

我无法隐藏墨条。我尝试了许多不同的事情，但没有成功。这是我目前拥有的 CSS，它确实改变了墨条的颜色。我希望禁用并完全隐藏它以消除边框阴影。

/* active tab ink bar */
::ng-deep .mat-ink-bar {
  background-color: var(--primary-color,$orange) !important;
  display: none !important;
  visibility: hidden !important;
  transition: none !important;
  height: 0px !important;
  width: 0px !important;
}

标签： cssangularangular-material

Answer 1

我在更改活动选项卡样式时遇到了同样的问题，我使用以下样式修复了它。

:host ::ng-deep .mat-tab-label {
    height: 3rem !important;
    min-width: 8rem !important;
}

/* Styles for the active tab label */
:host ::ng-deep .mat-tab-label.mat-tab-label-active {
    border: 1px solid #2F80ED;
    box-sizing: border-box;
    border-radius: 0.8rem;
}

/* Styles for the ink bar */
:host ::ng-deep .mat-ink-bar {
    display: none !important;
}