Question

<component>
  <p class="component-p"></p>
</component>

component样式表：

.component-p {
  color: red;
}

:host .component-p {
  color: red;
}

:host >>> .component-p {
  color: red;
}

>>> .component-p {
  color: red;
}

::content .component-p {
  color: red;
}

这些似乎都不起作用，但我不明白为什么。

如果我将::content .component-p放在其中的父组件中，那么它可以正常工作，但这没有任何意义，因为我没有将它转录到父组件中，而是将{{1}转换为子组件}。

你如何设计被抄送的内容？

Answer 1

使用angular-cli时使用:host /deep/ .component-p。

https://medium.com/google-developer-experts/angular-advanced-styling-guide-v4-f0765616e635

Answer 2

注意：有很多方法可以做到这一点。但是我在这里使用了如何从子组件设置ng-content element/control样式。

使用:host >>> .component-p选择transcluded元素，如下所示。

 styles: [`
                :host >>> .component-p {color:red;}
        `]

这可以按预期工作。

DEMO：https://plnkr.co/edit/z3urbPNvDXEnJZDMZo74?p=preview

Answer 3

已转换元素的样式应位于使用<component>的组件中。例如，假设我们有这个组件：

@Component({
      selector: 'app-other',
      template: `
          <p>something here</p>
          <ng-content></ng-content>
       `,
}) export class OtherComponent {}

如果我们在app.component中使用此功能，则必须在此处写入ng-content内的代码样式。

@Component({
    selector: 'app-root',
    template: `
         <app-other>
             <p class="component-p">some things</p>
         </app-other>
    `,
    styles: [`
        .component-p {
            color: red;
         }
    `]
 }) export class AppComponent {}

Answer 4

Angular在阴影DOM中生成一些标记，这些标记会阻止我们由于错误选择而进行样式设置。我发现允许您根据具体情况进行选择的最佳方法是通过在组件装饰器中关闭此自动生成的标记，如下所示：

@Component({
  selector: 'ss-primary-button',
  templateUrl: './primary-button.component.html',
  styleUrls: ['./primary-button.component.less'],
  encapsulation: ViewEncapsulation.Native
})

您在这里进行了封装。以上值强制“正常浏览器行为”。 ViewEncapsulation是从角形芯导入的，就像这样：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

现在，您应该可以按照普通的CSS，LESS或SASS选择标记，包括已包含的内容。

Angular 2如何设计风格转换元素？

4 个答案: