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

在使用材质组件的组件中，添加前缀为/deep/的css代码，如下所示： -

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

要了解所需元素的类名，请转到相应浏览器的开发人员工具，然后选择要更改border-radius的元素。获得类名后，请执行以下操作： -

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

Answer 2

好的，我知道。这是因为角度2提供的改进。我的代码是在我设计的其他组件中，在那个地方我想要风格。 Angular 2以这种方式编译代码，我无法访问父组件中的样式子组件。一切都在这里：angular.io/docs/ts/latest/guide/component-styles.html。

在Angular 2中自定义md-tab

2 个答案: