如何在媒体查询语法中使用ng-deep？

Question

我需要在桌面端动态绑定CSS类属性值。我在Angular中使用ng-deep。如果我在@media查询中使用ng-deep，它将无法正常工作。

我已经尝试了以下CSS代码：

 @media (min-width: 1025px) and (max-width: 1280px) {

   ::ng-deep.bs-datepicker {
    left: var(--my-var) !important;
   }

  }

ng-deep CSS 在媒体查询语法中无效。我需要将它放在哪里或者需要做什么？

- Manikandan

Answer 1

::ng-deep在媒体查询中是有效的……对于您的特定情况可能还有其他问题;

typeahead-basic.ts中相关的CSS:

  ::ng-deep .dropdown-menu.show { background:lightblue;}
  ::ng-deep .dropdown-item { color:red !important; }
  @media screen and (max-width:768px){
    ::ng-deep .dropdown-menu.show { background:lightgreen;}
    ::ng-deep .dropdown-item { color:orange !important; }
  }

请看完整的工作中的stackblitz

更新: 对于您共享的stackblitz，正确的语法如下... 你需要在1025px和1280px之间检查你的页面宽度，然后你会看到效果：

@media  (min-width:1025px) and (max-width: 1280px) {

::ng-deep .third-party-content{
  left:30px;
  position: absolute;
  color:red;
}

}

- Akber Iqbal

---

无法适用于您的场景？您能分享一个可以复制此行为的最小可重现示例吗？ - Akber Iqbal

@Manikandan，你需要检查一下在1025px和1280px之间的页面宽度，这样你就可以看到效果了。 - Akber Iqbal

对我来说不起作用。不得不放弃使用::ng-deep，改用ViewEncapsulation.None。这很奇怪，因为在没有@media选择器的情况下使用::ng-deep确实有效。 - Amit Beckenstein

Answer 2

我刚发现你可以这样在scss中实现

::ng-deep.bs-datepicker {
  @media  (min-width:1025px) and (max-width: 1280px) {
    left:30px;
    position: absolute;
    color:red;
  }
}

我可能来晚了，但是嘿， 如果你还需要，或者其他像我一样在找的人... 我希望它也适用于你 :)

- byron diggs