如何设置 Angular 6 mat-tabs 的样式？

Question

我一直在尝试对我的mat-tab行应用不同的样式。

我有一个网页，有 2 个，一个是主菜单（主页，关于我们等），第二个是使用mat-icon的图像。

我想对它们应用不同的样式，但没有任何效果。

我尝试向每个组件的 CSS 文件添加单独的 CSS，但它不会应用它，除非它在主（路由） style.css文件中，然后将样式集应用于两个选项卡。

我试过了：

第一个标签行的 HTML（使用主 CSS 文件）

<mat-tab-group class="mainContent">
    <mat-tab label="Personal details">
        <app-clientpersonalinfo></app-clientpersonalinfo>
    </mat-tab> 
    <mat-tab label="Product details">
        <app-comingsoon></app-comingsoon>
    </mat-tab>
</mat-tab-group>

第二个标签行的 HTML（尝试添加内联样式）

<mat-tab-group style="color: red !important">
  <mat-tab label="Personal details" style="color: red !important">
    <ng-template mat-tab-label style="color: red !important">
      <mat-icon title="Investor's personal details" style="color: red !important">person</mat-icon>
    </ng-template>
  </mat-tab> 
  <mat-tab label="Notes">
      <ng-template mat-tab-label>
          <mat-icon title="Investor notes">receipt</mat-icon>
        </ng-template>      
  </mat-tab>
</mat-tab-group>

带有选项卡组的第一个组件的 CSS 文件

/* Main Tab */
.mat-tab-header {
    border-bottom: 2px solid green;
    height: 46px;
}

.mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-primary .mat-tab-label-active {
    border-top: 2px solid green;
    border-left: 2px solid green;
    border-right: 2px solid green;
    background-color: red;
}

    /* ink bar style */
    .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
        background: transparent;
    }
/* ---  --- */

第一个选项卡组没有指定的绿色或红色

带有选项卡组的第二个组件的 CSS 文件

/* Main Tab */
.mat-tab-header {
    border-bottom: 2px solid blue;
    height: 46px;
}

.mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-primary .mat-tab-label-active {
    border-top: 2px solid blue;
    border-left: 2px solid blue;
    border-right: 2px solid blue;
    background-color: yellow;
}

    /* ink bar style */
    .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
        background: transparent;
    }
/* ---  --- */

第二个选项卡组没有蓝色或黄色，仅指定主 CSS 文件中的内容。

我还尝试将可怕的!important添加到所有 CSS 行，但它再次不起作用：

主 CSS

/* Main Tab */
.mat-tab-header {
    border-bottom: 2px solid #86a6c8;
    height: 46px;
}

.mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-primary .mat-tab-label-active {
    border-top: 2px solid #86a6c8;
    border-left: 2px solid #86a6c8;
    border-right: 2px solid #86a6c8;
    background-color: #cedbe9;
}

    /* ink bar style */
    .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
        background: transparent;
    }
/* ---  --- */

文件夹结构

src
|
|_components
  |
  |_menus
    |
    |_mainmenu
    |
    |_mainmenu.component.css
    |_mainmenu.component.html
    |_mainmenu.component.spec.ts
    |_mainmenu.component.ts
  |
  |_submenu
    |
    |_submenu.component.css
    |_submenu.component.html
    |_submenu.component.spec.ts
    |_submenu.component.ts
|
|_styles.css

Answer 1

请不要惊慌，因为从您的第一条消息行看来，您担心 angular 及其选项卡。 就我所理解的你所写的内容而言，我认为有一个简单的解决方案，我们可以解决这个问题并使标签变得更好。

对，首先，免责声明，我所说的将是纯 css 和脚本，我们不会接触 angular，这实际上是一件好事，因为在任何情况下，标签都是重要的东西。

1. 我们必须清除所有的 css 文件。 我建议清除styles.scss，然后删除_mainmenu.component.css 和_sub menu.component.css。 （ALERT-1 问题，为什么你有 _UNDERSCORE，这是 JAVA 的东西，我们说 CSS 它只是 mainmenu.component.css）。

2. 使用 css 文件 deleterd，我们现在可以添加我们需要的 css。 所以在样式 css 中，添加以下内容：

    angular.main.component.a { width: 150px; height: 80px; background-color: red; -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari 3-8 */ transform: rotate(20deg); } angular.sub.main.component.b { width: 150px; height: 80px; background-color: yellow; -ms-transform: skewY(20deg); /* IE 9 */ -webkit-transform: skewY(20deg); /* Safari 3-8 */ transform: skewY(20deg); } div.c { width: 150px; height: 80px; background-color: yellow; -ms-transform: scaleY(1.5); /* IE 9 */ -webkit-transform: scaleY(1.5); /* Safari 3-8 */ transform: scaleY(1.5); }

如果这会使标签以奇怪的角度旋转，请不要惊慌。 只需刷新页面，因为它将再次直行并在行中。

我希望这有帮助，如果我能做更多的帮助，请发表评论。

谢谢

Answer 2

你好，我可以说我感受到了你的困境！ 我们的三人组刚刚遇到了完全相同的问题！

我们的智慧是通过以下方式进行的：

组件 1

假设我们有一个组件。 我们就叫他比利吧。 Billy 是一个很好的小组件，他的好心围绕着另一个组件名称 Timmy。

组件 2

所以如果我们有标签。 想象他们是这样的：

比利 -> 蒂米 -> 标签。

知道了？

好的！

我们刚刚说到哪了？ Righttttt，现在比利和蒂米想要成为自己的人。 他们想要不同的发型和不同的 T 恤等等，但他们目前由同一个人穿着。 我们称之为main.css 。

解决方案！

create abilly.css and timmy.css file

让main.css成为它自己的东西。

然后组件 1继承了 timmy 文件。 比利很高兴。

现在说得通，但我们的三人小组花了很多天才弄明白这一点。

很高兴能帮上忙。

Answer 3

您可以使用 ::ng-deep 伪元素设置默认材质类的样式。

:host ::ng-deep .mat-tab-header {
    border-width: 9px;
    border-style: solid;
    border-color: orange;
  }

:host 是可选的，它将样式范围限定为当前组件中的选项卡。