使用 scss 访问组件的子 class

Question

我有一个my-grid组件，它在parent-component中用作

父组件

<my-grid id="myGrid" [ngClass]="'temp'"></my-grid>

在下面呈现为 HTML

<my-grid id="myGrid" class="temp e-control e-grid e-lib e-gridhover e-responsive e-default e-droppable e-tooltip e-keyboard" >
   <div class="e-groupdroparea e-lib e-droppable e-draggable" tabindex="-1">
      XYZ
    </div>
</my-grid>

我已经使用ngClass动态添加了条件 class temp 。 ParentComponent具有encapsulation: ViewEncapsulation.None 。 在parent-component.scss我有：

parent-comp {
  my-grid {
    .temp {
      &.e-groupdroparea.e-lib.e-droppable.e-draggable{
        margin-left: 265px !important;
      }
    }    
    // below styling works
    /**.e-groupdroparea.e-lib.e-droppable.e-draggable{
      * margin-left: 265px !important;
      *}
    */
  }
}

当我尝试使用 scss 的.temp{ }添加样式时，样式不起作用。 我究竟做错了什么？

Answer 1

尝试

parent-comp {
    .temp {
      .e-groupdroparea.e-lib.e-droppable.e-draggable{
        margin-left: 265px !important;
      }
    } 
}

它应该工作。