为 CSS 范围设定生成的 Angular 属性未应用于组件的内部元素
Generated Angular attributes for CSS scoping not getting applied to inner elements of components
Angular 生成属性并且似乎仅将它们应用于您在模板中声明的元素。组件附带的任何其他 HTML 元素(在我的例子中,angular-material 的 mat-form-field
)不会应用此属性。
这是设计使然吗?它的效果是无法定位那些内部元素,因为您在组件的 css 文件中定义的任何 类 都会与属性 Angular 生成。
就我而言,
.mat-form-field * {
border-radius: 0;
}
生成到:
mat-form-field[_ngcontent-c19] *[_ngcontent-c19] {
border-radius: 0;
}
我的目标是为组成 <mat-form-field>
的许多 HTML 元素设置样式。
有没有什么方法可以从我的组件文件中实现这一点(不求助于站点范围的样式表)?
您必须使用 ::ng-deep 而不是 /deep/,这似乎已被弃用。
mat-form-field ::ng-deep *
根据文档:
The shadow-piercing descendant combinator is deprecated and support is
being removed from major browsers and tools. As such we plan to drop
support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until
then ::ng-deep should be preferred for a broader compatibility with
the tools.
你可以找到它here
Angular 生成属性并且似乎仅将它们应用于您在模板中声明的元素。组件附带的任何其他 HTML 元素(在我的例子中,angular-material 的 mat-form-field
)不会应用此属性。
这是设计使然吗?它的效果是无法定位那些内部元素,因为您在组件的 css 文件中定义的任何 类 都会与属性 Angular 生成。
就我而言,
.mat-form-field * {
border-radius: 0;
}
生成到:
mat-form-field[_ngcontent-c19] *[_ngcontent-c19] {
border-radius: 0;
}
我的目标是为组成 <mat-form-field>
的许多 HTML 元素设置样式。
有没有什么方法可以从我的组件文件中实现这一点(不求助于站点范围的样式表)?
您必须使用 ::ng-deep 而不是 /deep/,这似乎已被弃用。
mat-form-field ::ng-deep *
根据文档:
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
你可以找到它here