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

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

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

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

使用styleUrl与主机选择器

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

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

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

Answer 2

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

我觉得这更清洁，更容易实现。

<强> parent.css

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

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

Answer 3

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

您还可以将封装模式更改为ViewEncapsulation.None。这样，您的组件将能够看到父组件的样式：

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

希望它可以帮到你，亨利

Answer 4

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

我们不能通过使用类来为自定义元素编写css样式。

实施例

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

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

为此，我们可以使用：host selector来设置下面给出的样式

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

在custom-component.scss

中

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

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

从父级应用样式

4 个答案: