Angular 2 material 垫片尺寸

Question

我有如下一段代码

  <mat-tab-group>
    <div *ngFor="let question of subcategory.questions">
        <mat-tab label={{question.question_id}} class="question-tab">{{question.question}}</mat-tab>
    </div>
  </mat-tab-group>

显示如下：

但是我想减少制表符的宽度，像这样：

问题是，当我在运行时更改 css 时，它调整得很好，但是当我将 css 设置为：

.mat-tab {
  min-width: 50px !important;
}
.mat-tab-label[_ngcontent-c9]{
    min-width: 50px !important;
}

没用。知道如何解决这个问题吗？

Answer 1

试试这个：

/deep/.mat-tab-label, /deep/.mat-tab-label-active{
 min-width: 0!important;
 padding: 3px!important;
 margin: 3px!important;
}

注意： 在 angular 8 /deep/ 不工作...你可以使用 ::ng-deep，像这样：

::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{
 min-width: 0!important;
 padding: 3px!important;
 margin: 3px!important;
}

Answer 2

在我的例子中，接受的答案效果不佳 - 在选项卡之间切换时，特定选项卡 body 的宽度正在改变并且看起来不太好，所以我添加了 mat-tab-link 来解决它

::ng-deep.mat-tab-link,  ::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{
    min-width: 97px!important;
}

Answer 3

如果要控制 angular material 选项卡的 height 和 width，请使用样式后跟 ::ng-deep。检查下面的代码修改 height 和 width

::ng-deep .mat-tab-label
{
  height: 27px !important;
  min-height: 5px!important;
  margin: 3px!important;
  width: 90px!important;
  min-width: 5px!important;
}

Answer 4

这对我有用

.mat-tab-group > .mat-tab-header > .mat-tab-label-container > .mat-tab-list > .mat-tab
labels {
  .mat-tab-label[role^='tab'] {
    min-width: 72px;
  }
}

Answer 5

没有!important:

/* 
    ::ng-deep disables view-encapsulation of Angular components 
        -> to avoid global style bleeding use it in combination with :host
        -> https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
*/
:host ::ng-deep .mat-tab-label {
    min-width: 100px;
}

Angular 2 material 垫片尺寸

Angular 2 material mat-tab size

angular-material

angular-material2

angular