Angular 4忽略媒体查询求助：样式编译异常未覆盖组件样式

嘿，我来帮你拆解下这个问题～你遇到的情况其实是Angular的**视图封装（View Encapsulation）**在起作用，这也是Angular实现组件样式隔离的核心机制。

问题根源 #

Angular默认会给每个组件的DOM元素添加专属的属性（比如你看到的_ngcontent-c2），同时把组件内的CSS编译成带有这些属性的选择器（比如nav[_ngcontent-c2] a[_ngcontent-c2]）。这样做是为了让组件样式只作用于当前组件内部，避免全局样式污染。但你写的样式（不管是在父组件还是全局样式里）没有带上这些属性选择器，自然就匹配不到目标元素，所以无法覆盖原有样式。

几个可行的解决方案 #

• 用::ng-deep穿透视图封装
  这是最常用的局部覆盖子组件样式的方法，在你的选择器前加上::ng-deep，Angular就会忽略视图封装的属性限制，让样式穿透到子组件中。修改后的代码如下：

  ::ng-deep .app-body app-navigation nav a {
    font-size: 18px;
    width: 100rem;
  }
  

  注意：虽然后续Angular版本标记了::ng-deep为deprecated，但在Angular 4里它是完全稳定可用的，而且是处理这类问题的标准方案。

• 禁用目标组件的视图封装
  如果你的组件不需要样式隔离，可以在组件装饰器里关闭视图封装，这样组件的样式会变成全局样式，不会添加那些专属属性。示例代码：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class YourComponentComponent { }
  

  小提醒：这种方法会让你的样式影响全局其他组件，要注意避免类名冲突。

• 将样式放到全局样式文件中
  比如Angular CLI默认的styles.css（或styles.scss等），全局样式里的规则不会被添加视图封装的属性选择器，因此能直接覆盖组件内的样式。不过同样要注意全局样式污染的问题，建议用更具体的选择器来限定作用范围。

• 提高选择器优先级（备选方案）
  如果不想用::ng-deep，可以尝试通过增加父元素选择器来提高样式优先级，比如写成body .app-body app-navigation nav a。但这种方法不一定可靠，因为Angular的属性选择器优先级很高，大概率还是覆盖不了，所以只作为备选。

总结 #

最推荐的是::ng-deep方案，它既能精准覆盖目标样式，又不会像禁用封装那样造成全局样式污染，非常适合你的场景。

内容的提问来源于stack exchange，提问作者Przemek Urbaniak