时间戳

首页 > 解决方案 > 使用 scss 访问组件的子类

html - 使用 scss 访问组件的子类

问题描述

我有一个my-grid组件，它在parent-componentas内部使用

父组件

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

我已经temp使用动态添加了条件类ngClass。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;
      *}
    */
  }
}

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

标签： htmlcssangularsass

解决方案

尝试

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

它应该工作。

推荐阅读