在 Angular 2 中自定义 md-tab答案

【问题标题】：Customize md-tab in Angular 2在 Angular 2 中自定义 md-tab
【发布时间】：2023-03-28 10:40:01
【问题描述】：

我在 Angular 2 中设置 md-tab 组件的样式时遇到了一些问题。我知道 Angular 2 Materials 现在仍在开发中，但我想知道是否有一种方法可以自定义它，例如删除底部半径。这是一个代码：

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

【问题讨论】：

检查你的元素，查看相关的类，然后用你自己的 CSS 代码覆盖它。
我正在尝试这种解决方案，但是当我在标签“md-tabs”和“模板”中插入一些类时，编译后，我没有在生成的代码中插入这些类
也在尝试这个编译代码已经拥有的样式类
我不熟悉 angular2，但我在 Angular1 中遇到了这个问题。奇怪的是你的类被删除了......也许尝试覆盖 angular 使用的类？
好的，在检查模式下搜索后，我知道为什么我的样式代码在生成的类上不起作用：这是从我的 scss 代码生成的 css（我已经编写了 class e.q .md- tab-header) .md-tab-header[_ngcontent-mfl-3] { background-color: black !important;在生成的 html 中，我有名为 .md-tab-header 和 .md-tab-header[_ngcontent-mfl-5] 的类，其中包含所有样式。这就是为什么我的样式代码不起作用的原因。但是我仍然不知道如何解决这个问题

标签： css angular angular-material

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：