在 Angular 4 中使用 ::ng-deep 覆盖子组件 CSS 属性
在 Angular 4 中，::ng-deep 选择器允许您可以从父组件的 CSS 中覆盖子组件的 CSS 属性。这是通过穿透子组件的影子 DOM 边界来实现的。
用法：
要使用 ::ng-deep，只需将其添加到 CSS 选择器中以子组件的元素为目标，如下所示：
<code class="css">::ng-deep .child-component {
/* CSS properties to override */
}</code>示例：
考虑以下 HTML 结构：
<code class="html"><parent-component> <child-component class="child"></child-component> </parent-component></code>
覆盖子组件中 p 元素的样式，您可以在父组件中使用以下 CSS：
<code class="css">::ng-deep .child p {
color: red;
}</code>IE11 支持：
::ng Internet Explorer 11 不支持 -deep。如果您需要支持 IE11，则应使用备用 :host-context() 选择器。然而， :host-context() 有其自身的局限性，可能并不适合所有情况。
以上是如何使用 ::ng-deep 覆盖 Angular 4 中的子组件 CSS 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！
