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

Question

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

: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 & display的样式化不应用于.cta和display或.cta .button。我需要那个。

我在不同的选择器前后尝试过不同的ViewEncapsulation策略(Emulated、Native、None)，但是没有运气--也许你有一些我没有想到的东西(?)

需要一些关于我的选择的建议。

Answer 1

你试过这个吗？

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