当我在角材料中的选项卡之间切换时显示滚动条？

Question

<widget-shell [title]="data.title" (closeButtonClicked)="onCloseButtonClick($event)">
<mat-tab-group (selectedTabChange)="tabChange()">
    <mat-tab label="Data">
        <graph-bar *ngIf="graphSettings" [tabChanged]="tabChanged" [settings]="graphSettings.dataSeries"></graph-bar>
    </mat-tab>
    <mat-tab label="SMS">
        <graph-bar *ngIf="graphSettings" [tabChanged]="tabChanged"  [settings]="graphSettings.smsSeries"></graph-bar>
    </mat-tab>
    <mat-tab label="Voice">
        <graph-bar *ngIf="graphSettings" [tabChanged]="tabChanged"  [settings]="graphSettings.voiceSeries"></graph-bar>
    </mat-tab>
</mat-tab-group>

在 CSS 中：

::ng-deep .mat-tab-body-content {
      overflow: visible !important;
    }

通过使用上面的 css 解决了这个问题，但是有没有其他方法可以在不使用!important情况下实现相同的目标

Answer 1

这是一个更好的解决方案（在 v-7 上测试）：

<mat-tab-group [dynamicHeight]='true'>

Answer 2

是的，有！

您需要设置overflow: visible; ，但这就是问题：您需要确保您的 CSS 比 angular 的样式具有更高的优先级。 请在此处查看 CSS 优先级： http : //www.standardista.com/css3/css-specificity/和http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

因此，您可以使用开发人员工具检查要覆盖的组件的样式，然后设置比该样式更高的优先级。

简单提示：复制并粘贴您在开发工具中找到的顺序，然后将您的样式放入其中并确保您要覆盖的文件晚于角度材料的 css

Answer 3

这是 mat tabs 的默认行为。即使我遇到了同样的问题。我通过将上面的代码放在 css 文件中来解决这个问题，

::ng-deep .mat-tab-body-content {溢出：可见！重要}

请记住：不要忘记在 css 中添加 !important，否则它会被忽略并且永远不会应用于您的选项卡。