Angular 9 / SCSS 未仅应用于自定义标记的子项

Question

我正在尝试使用我自己的 angular 库，它与 Angular 4 兼容。我的目标是让它与 Angular 9 兼容。由于某种原因，css 不适用于组件的子项。该组件是最后一个嵌套组件。

HTML输出

<ui-label _ngcontent-nln-c13="" _nghost-nln-c12="" ng-reflect-label="test">
    <span _ngcontent-nln-c12="">test</span>
</ui-label>

label.component.scss

foo-label {
  //font-style: italic; //<-- works here :/
  > span{
    font-style: italic; //<-- not applied
  }
}

有人有想法吗？

Answer 1

我找到了它未应用的原因。这是由于范围组件。

foo-label 被 foo-tag 包装成这样：

<foo-tag _ngcontent-han-c14="" _nghost-han-c13="" ng-reflect-label="test" ng-reflect-hlevel="1">
    <h1 _ngcontent-han-c13="">
        <foo-label _ngcontent-han-c13="" _nghost-han-c12="" ng-reflect-label="test">
             <span _ngcontent-han-c12="">test</span>
        </foo-label>
    </h1>
</foo-tag>

并且样式写在 tag.component.scss 中。像这样：

tag.component.scss

:host{
    > h1 {
        > foo-label { //<--applied css until here !
           > span {
             ...
           }
        }
    }
}

您可以像这样用 ::ng-deep 修复：

:host{
    > h1 {
        ::ng-deep > foo-label {
           > span {
             ...
           }
        }
    }
}

像这样与 mixin 一起工作：

:host{
    > h1 {
        @include h($light-color, $title-header-size, $application-toolbar-icon-size);
    }
}

@mixin h($text-color, $font-size, $size-img){
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    white-space: nowrap;
    ::ng-deep > foo-label {
        @include label($text-color, $font-size, $size-img);
    }
}

Angular 9 / SCSS 未仅应用于自定义标记的子项

Angular 9 / SCSS not applied only for a child of a custom tag

sass

angular9