Question

对，我在尝试将不同的样式应用于mat-tab行时遇到了麻烦。

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

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

我尝试将分隔css添加到每个组件css文件中，但是除非将其应用到主{route} style.css文件中，然后将样式集应用于两个标签。

能不能帮我一下

我尝试过：

第1个标签行的HMTL（使用主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和脚本，我们不会碰到角，这实际上是一件好事，因为在任何情况下选项卡都是重要的事情。

我们必须清除您所有的CSS文件。我建议清除styles.scss，然后删除_mainmenu.component.css和_sub menu.component.css。（ALERT-1问题，您为什么要拥有_UNDERSCORE，这是Java，我们说的CSS就是mainmenu.component.css。）

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

说我们有一个组成部分。我们叫他比利。比利是个很好的小人物，他的好心环绕着另一个名字蒂米。

组件2

因此，如果我们有标签。像这样想象他们：

比利->蒂米->标签。

知道了吗？

好！

我们在哪里？ Righttttt，现在Billy和Timmy希望在那里拥有自己的人民。他们想要不同的发型和不同的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 是可选的，它将样式范围限定为当前组件中的选项卡。

如何设置Angular 6 Mat-tab的样式

3 个答案: