应用来自父项的样式

Question

假设我有一个带有此模板的组件：

<div class="frame">
  <span class="user-defined-text">{{text}}</span>
</div>
<style>
  span { font-size: 3em; }
  .frame { ... }
</style>

如何合并应用到组件的样式，例如

<custom-component [text]="'Some text'">
<style>custom-component { font-weight: bold; }</style>

以便最终输出 "Some text" 都是粗体和 3em 大小？

更好的方法是获取宿主元素的计算样式，例如，我可以将宿主的 background-color 应用于某些元素的 border-color我的模板？

Answer 1

关于CSS，组件支持阴影DOM。这意味着他们的风格是孤立的。默认模式是隔离的。所以你需要在组件中定义 CSS 样式（样式属性）。

也可以将封装方式改为ViewEncapsulation.None。这样你的组件就可以看到父组件的样式：

@Component({
  selector: 'child',
  encapsulation: ViewEncapsulation.None,
  (...)
})
export class MyComponent {
  (...)
}

希望对你有帮助，蒂埃里

Answer 2

设置 encapsulation: ViewEncapsulation.None 以允许应用外部样式。

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

@Component({
  selector: 'custom-component',
  encapsulation: ViewEncapsulation.None
})
export class Custom {

使用 styleUrl 添加一个 CSS 文件结合主机选择器

:host(.someClass) {
      background-color: blue;
}

<custom-component class="someClass"></custom-component>

根据添加到元素的 class 应用样式。

Answer 3

我知道这很旧，但我觉得这应该更明显。您可以使用 /deep/ 选择器强制样式通过子组件树向下进入所有子组件视图。 /deep/ 选择器适用于任何深度的嵌套组件，它同时适用于组件的视图子项和内容子项。

我觉得这样更简洁也更容易实现。

parent.css

/deep/ .class {
    background-color: red;
}

https://angular.io/docs/ts/latest/guide/component-styles.html

Answer 4

使用 :host 伪 class 选择器来设置任意 <custom-component> 的样式。

我们无法通过使用 class.

将 css 样式写入自定义元素

例子

<custom-component class="custom-comp" [text]="'Some text'">

.custom-comp {
  font-weight: bold;
  color: green;
}

为此，我们可以使用 :host 选择器来设置样式，如下所示

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.html',
  styleUrls: ['./custom-component.scss']
})

自定义-component.scss

:host {
  font-weight: bold;
  color: green;
}

您可以在 Angular4 的官方文档中阅读有关 :host 元素样式的更多信息

应用来自父项的样式

Apply styles from parent

css

angular2-directives

angular