Примените стили от родителя в angular2

Предположим, что у меня есть компонент с этим шаблоном:

<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" был выделен жирным шрифтом и размером 3 раза?

Еще лучше было бы получить вычисленные стили для элемента хоста, так что, например, я мог бы применить background-color, примененный к хосту, к border-color некоторого элемента в моем шаблоне.

Ответ 1

установите 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>

применять стили в зависимости от класса, добавленного к элементу.

Ответ 2

Я знаю, что это старо, но я считаю, что это должно быть более заметным. Вы можете использовать селектор /deep/, чтобы стилизовать стиль через дочернее дерево компонентов во всех представлениях дочерних компонентов. Селектор /deep/ работает с любой глубиной вложенных компонентов, и он применяется как к дочерним элементам просмотра, так и к дочерним элементам контента компонента.

Я чувствую, что это намного чище и проще реализовать.

parent.css

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

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

Ответ 3

Что касается CSS, компоненты поддерживают теневую DOM. Это означает, что их стили изолированы. Режим по умолчанию изолирован. Поэтому вам нужно определить стили CSS в компоненте (свойство styles).

Вы также можете изменить режим инкапсуляции на ViewEncapsulation.None. Таким образом, вы будете иметь возможность видеть стили родительского компонента:

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

Надеюсь, это поможет вам, Thierry

Ответ 4

Используйте селектор псевдо-класса : хост, чтобы создать стиль <custom-component>.

Мы не можем писать CSS-стиль в пользовательский элемент, используя класс.

Пример

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

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

Для этой цели мы можем использовать: селектор хоста для стиля, как указано ниже

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

В custom-component.scss

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

Вы можете больше узнать о стиле : host на Angular4 Официальные документы