[英]How to change styles of child mat angular component?
As angular official documentation says, ::ng-deep , >>>, /deep/
is deprecated and will be removed soon:正如 angular 官方文档所说,
::ng-deep , >>>, /deep/
已弃用,很快将被删除:
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
If i am using mat
components like <mat-checkbox>
or a more comprehensive one like <mat-table>
how could I have some changes to that component from parent?如果我使用像
<mat-checkbox>
这样的mat
组件或更全面的像<mat-table>
这样的组件,我怎么能从父组件对该组件进行一些更改?
.SCSS
files?.SCSS
文件中编写样式吗?inner
material angular component if deep selector is going to be removed?inner
材质角度组件的样式?As the mention document says you can use the combination of ::ng-deep
with :host
and it will be OK in this way.正如提及文档所说,您可以将
::ng-deep
与:host
结合使用,这样就可以了。
In order to scope the specified style to the current component and all its descendants, be sure to include the
:host
selector before::ng-deep
.为了将指定的样式范围限定到当前组件及其所有后代,请确保在
::ng-deep
之前包含:host
选择器。 If the::ng-deep
combinator is used without the:host
pseudo-class selector, the style can bleed into other components如果在没有
:host
伪类选择器的情况下使用::ng-deep
组合器,则样式可能会渗透到其他组件中
:host /deep/ h3 {
font-style: italic;
}
But, you also can use the custom CSS
class & id to apply your custom css on .CSS
or .SCSS
files on the Angular Material Components .但是,您也可以使用自定义
CSS
类和id将自定义 css 应用于Angular Material Components上的.CSS
或.SCSS
文件。 using .class
& #id
in combination with mat
default classes works.将
.class
& #id
与mat
默认类结合使用是有效的。 In addition you can use custom Angular material classes in your componnent style files ( .CSS
or .SCSS
) to override the like this:此外,您可以在组件样式文件(
.CSS
或.SCSS
)中使用自定义 Angular 材质类来覆盖如下所示:
.app-component-style {
/* All the CSS here */
.mat-tab-group .mat-tab-label {color: green;}
}
So, keep using it as Dudewad mention here too: https://stackoverflow.com/a/49308475/4185370所以,继续使用它作为Dudewad在这里提到的: https : //stackoverflow.com/a/49308475/4185370
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.