javascript - 如何在媒体查询语法里面使用ng-deep？

Question

我需要为桌面动态绑定(bind) 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 不适用于媒体查询语法。我需要放在哪里或者我需要做什么？

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; }
  }

完成working stackblitz here

更新:为您的shared stackblitz ，正确的语法如下...您必须检查页面宽度在 1025px 和 1280px 之间，您将看到实际效果:

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

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

}