Angular 替代角度零部件中的角度材质样式_Angular_Angular Material2

Angular 替代角度零部件中的角度材质样式

angular

Angular 替代角度零部件中的角度材质样式,angular,angular-material2,Angular,Angular Material2,我在我的角度组件中使用材料2。我想覆盖在Angular Material中定义的一个类，例如.mat input wrapper。但我只想覆盖该组件，覆盖不应影响页面中的其他组件下面是呈现元素的屏幕截图：正如@Dylan指出的，您必须使用/deep/来更改子组件中的CSS。以下是我一直在寻找的答案：：host/deep/md input container.mat input wrapper首选解决方案可能是在您自己的材质主题样式表中定义样式。不推荐使用/deep/（Angular V 4.

我在我的角度组件中使用材料2

。我想覆盖在Angular Material中定义的一个类，例如

.mat input wrapper

。但我只想覆盖该组件，覆盖不应影响页面中的其他组件

下面是呈现元素的屏幕截图：

正如@Dylan指出的，您必须使用

/deep/

来更改子组件中的CSS。以下是我一直在寻找的答案：

：host/deep/md input container.mat input wrapper

首选解决方案可能是在您自己的材质主题样式表中定义样式。不推荐使用/deep/（Angular V 4.3）：

现在可以使用：：ng deep at作为定义自己的主题样式表的替代方法

但是，当使用：：ng deep覆盖默认字体系列时，使用它会再次对使用材质图标产生负面影响（因为材质图标也是一个字体系列）

无需使用

包装。更确切地说，设计一个有棱角的材质元素，比如卡片的标题

<mat-card>
   <mat-card-title>
      {{title}}
   </mat-card-title>
</mat-card>

将此应用于另一个“子”元素，如

使用VS代码，在CSS编辑器中悬停将显示此CSS将如何呈现的详细信息。在本例中，

…

当然，如果您在一个组件中多次使用该卡，那么您需要使用CSS类名将

class=“card-style-1”

添加到元素本身，如

如果您使用的是SCSS try：：ng deep

::ng-deep { 
       .sample {
         // style
         color: green;
       }
    }

对于SCS，我建议的最简单方法是：
您可以复制属性的类名并在style.scss中重写它，这样它就可以工作了

在新的SCSS文件中创建一个@mixin并覆盖所有您想要的属性。
然后在style.scss中导入这个@mixin。这是一种更干净的方法

编辑：仅为特定组件覆盖默认css的更简单、更清晰的方法：
打开index.html
并为body
指定一个唯一属性，正如我添加的override

<body override>
 <app-root>
    <loading-screen></loading-screen>
 </app-root>
</body>


运行并享受，：ng deep
的问题是，它将在所有页面和所有组件上应用样式。这意味着这是一种肮脏的做法。更好的方法是使用自定义类包装，并在styles.scss/styles.css

例如：
如问题中所问。要覆盖.mat输入包装器
，请使用自定义类包装元素，如：
。然后在
样式。scss:
.big-input .mat-input-wrapper {
   height : 200px;
}

添加！重要信息
如有必要。
：host/deep/md input container.mat input wrapper{…}@Dylan谢谢，这很有效。你能不能把它贴出来作为答案，这样我就可以接受了？我到处都在找这个！我真的认为这个解决方案应该写在文档的显著位置。/deep/，它的所有别名现在都不推荐了。没有等效的解决方案。谣传他们正在等待w3c创建一个解决方案。这可能是真的，但我仍然看到这个解决方案在Angular 7.1.3解决方案和Angular Material 7.1.1中工作。引用的用法是：：ng deep-尽管最终会贬值，但它对短期使用具有最佳兼容性。来自NG文档：阴影穿透子体combinator已被弃用，并且正在从主要浏览器和工具中删除支持。因此，我们计划在Angular（对于所有3个/deep/、>>>和：：ng deep）中放弃支持。在此之前，为了更广泛地与工具兼容，最好使用：：ng deep。@DennisSmolek不，不是。您应该使用ng deep，因为没有类似功能的替代品。他们刚刚将其标记为不推荐使用，以告知开发人员，在css本身具有通用功能之后，它将被更改。所以，如果需要，您应该使用：：ng deep。当我试图覆盖它时，这对mat卡标题上的字体大小不起作用。请问，我如何在SASS上使用它？
::ng-deep { 
       .sample {
         // style
         color: green;
       }
    }

<body override>
 <app-root>
    <loading-screen></loading-screen>
 </app-root>
</body>

[override] app-employee .mat-input-container {
// add your custom CSS properties 
// this will apply only a particular component 
}

.big-input .mat-input-wrapper {
   height : 200px;
}