为子组件中的 angular material 个组件设置样式
Styling angular material components from child components
HomeComponent
模板包含路由器插座
/* home.component.ts */
...
<mat-sidenav-container>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
将呈现 ListComponent
应设置 mat-sidenav-content
的 overflow
样式。
为什么以下不起作用?
/* list.component.css */
:host-context(mat-sidenav-content) { /* same for .mat-sidenav-content */
overflow: unset !important;
}
根据我的理解,选择器应该选择任何 mat-sidenav-content
遍历所有 DOM 到根。
恐怕这不是 :host-context 的工作方式。主机上下文用于根据组件的祖先有条件地将样式应用于组件主机。在您的示例中,列表组件应该有 overflow: unset 但如果它的另一个实例没有 mat-sidenav-content 作为祖先,它就不会有这个。这对于应用基于主题的样式很有用,如此处的文档所示:
https://angular.io/guide/component-styles#host-context
我在您的溢出 css 中包含了一个关于 stackblitz 的示例,并且在这种情况下我还将文本设置为红色,因此它更加明显,您可以看到它如何适用于一个而不是另一个。不幸的是,没有办法做我认为你正在尝试做的事情,即当组件在父级内部时将样式应用于父级。
为了完整性,我在另一个组件中也有 ::ng-deep 示例,正如我所看到的那样,一些人曾将样式应用于其他组件。我建议你远离这个,因为这种风格在第一次应用后会保留(尝试去那个 link 然后回到列表)并且 ::ng-deep 无论如何都被弃用了。
编辑:stackblitz 已更新为包含 :host
的示例
最好用 HTML 术语而不是组件来考虑宿主元素,因此 dom <app-list>
是宿主元素而不是模板中的元素。如果你想在那里设置样式,你不需要使用 :host。我已经更新了我的 stackblitz 示例以包括主机,如果您检查 css 您可能会更好地了解它是如何工作的。
HTML 看起来像这样
<app-list _nghost-qnl-c20="">
<p _ngcontent-qnl-c20=""> This text should be red only when inside mat-sidenav-content. The font family is set by host.
</p>
</app-list>
和css:
mat-sidenav-content[_nghost-qnl-c20], mat-sidenav-content [_nghost-qnl-c20] {
color: red;
}
[_nghost-qnl-c20] {
font-family: Arial, Helvetica, sans-serif;
}
因此您可以看到 host 使用 angular 生成的属性,而 :host 本身就是该属性,并且 :host-context(element) 成为 css 中的元素 [attribute] .
HomeComponent
模板包含路由器插座
/* home.component.ts */
...
<mat-sidenav-container>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
将呈现 ListComponent
应设置 mat-sidenav-content
的 overflow
样式。
为什么以下不起作用?
/* list.component.css */
:host-context(mat-sidenav-content) { /* same for .mat-sidenav-content */
overflow: unset !important;
}
根据我的理解,选择器应该选择任何 mat-sidenav-content
遍历所有 DOM 到根。
恐怕这不是 :host-context 的工作方式。主机上下文用于根据组件的祖先有条件地将样式应用于组件主机。在您的示例中,列表组件应该有 overflow: unset 但如果它的另一个实例没有 mat-sidenav-content 作为祖先,它就不会有这个。这对于应用基于主题的样式很有用,如此处的文档所示:
https://angular.io/guide/component-styles#host-context
我在您的溢出 css 中包含了一个关于 stackblitz 的示例,并且在这种情况下我还将文本设置为红色,因此它更加明显,您可以看到它如何适用于一个而不是另一个。不幸的是,没有办法做我认为你正在尝试做的事情,即当组件在父级内部时将样式应用于父级。
为了完整性,我在另一个组件中也有 ::ng-deep 示例,正如我所看到的那样,一些人曾将样式应用于其他组件。我建议你远离这个,因为这种风格在第一次应用后会保留(尝试去那个 link 然后回到列表)并且 ::ng-deep 无论如何都被弃用了。
编辑:stackblitz 已更新为包含 :host
的示例最好用 HTML 术语而不是组件来考虑宿主元素,因此 dom <app-list>
是宿主元素而不是模板中的元素。如果你想在那里设置样式,你不需要使用 :host。我已经更新了我的 stackblitz 示例以包括主机,如果您检查 css 您可能会更好地了解它是如何工作的。
HTML 看起来像这样
<app-list _nghost-qnl-c20="">
<p _ngcontent-qnl-c20=""> This text should be red only when inside mat-sidenav-content. The font family is set by host.
</p>
</app-list>
和css:
mat-sidenav-content[_nghost-qnl-c20], mat-sidenav-content [_nghost-qnl-c20] {
color: red;
}
[_nghost-qnl-c20] {
font-family: Arial, Helvetica, sans-serif;
}
因此您可以看到 host 使用 angular 生成的属性,而 :host 本身就是该属性,并且 :host-context(element) 成为 css 中的元素 [attribute] .