使用SCSS` @ extends`使用深层元素样式

Question

如下所示，如何在一个地方声明嵌套的SCSS样式模块，并利用@extends在::ng-deep上定义:host样式？

:host.tr.project {
  @extend .project;
}

.project {
  border: solid 1px orangered;
  display: table-row;

  .cta {
    .button {
      background: tomato;
      border: solid 1px cyan;
      border-radius: 50%;
    }
  }

}

.project border＆amp;的样式然而，display已应用没有样式应用于.cta和|或.cta .button 。我需要那个。

我在不同的选择器之前和之后尝试了不同的ViewEncapsulation策略（Emulated，Native，None）和::ng-deep并且没有运气 - 也许你有一些我没有想到的东西（？）

需要一些关于我的选择的指示。

Answer 1

你试过这个吗？

:host.tr.project {
  @extend .project;
    :host /deep/ .project.cta{
     // things goes here !
  }
}