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;
}

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;
}

Answer 2

你確定這不是mat-tab-nav-bar ：

::ng-deep .mat-tab-header, .mat-tab-nav-bar {
    border-bottom: 0;
}

你也可以檢查這個。

Answer 3

我也面臨同樣的問題，我已經解決了這個問題

/* header */
::ng-deep.mat-tab-group .mat-tab-header, .mat-tab-nav-bar .mat-tab-header{
  border-bottom: none;
}

/* ink bar style */
::ng-deep.mat-tab-group .mat-ink-bar, .mat-tab-nav-bar .mat-ink-bar{
 display: none !important;
}

Answer 4

自 Angular (Material) 15 mat-ink-bar 已更名。 我能夠使用全局 scss 中的以下代碼片段將其刪除：

.mdc-tab-indicator__content {
  display: none;
}

Answer 5

/* header */
::ng-deep.mat-tab-group .mat-tab-header, .mat-tab-nav-bar .mat-tab-header{
  border-bottom: none;
}

/* ink bar style */
::ng-deep.mat-tab-group .mat-ink-bar, .mat-tab-nav-bar .mat-ink-bar{
 display: none !important;
}