css - 在 Angular 2 中自定义 md-tab

Question

我在 Angular 2 中设置 md-tab 组件的样式时遇到了一些问题。我知道 Angular 2 Materials 现在仍在开发中，但我想知道是否有办法自定义它，例如删除 bottom-radius。这是一个代码:

<md-card>
    <md-tab-group [selectedIndex]="1">
      <md-tab>
        <template md-tab-label>
          MY FILES
        </template>
      </md-tab>
      <md-tab>
        <template md-tab-label>
          ALL FILES
        </template>
      </md-tab>
      <md-tab>
        <template md-tab-label>
          MY INTERESTS
        </template>
      </md-tab>
    </md-tab-group>
</md-card>

Answer 1

在您使用 Material 组件的组件中，添加前缀为 /deep/ 的 CSS 代码，如下所示:-

/deep/ .mat-tab-label{
        min-width: 25px !important;
        padding: 5px;
}

要了解所需元素的类名，请转到相应浏览器的开发人员工具，然后选择要更改其border-radius 的元素。现在在获得类名后，做这样的事情:-

/deep/ .mat-class-name{
    border-radius:0 !important;
}