Переопределение инкапсулированного: хост-стиля внешнего компонента

Можно ли переопределить: хост-стиль внешнего angular2-компонента?

Мы создаем библиотеку, включающую компонент боковой панели. Этот компонент имеет фон по умолчанию (резервный), но его следует переопределить с помощью css / theme, используемого в приложении.

@Component({
    selector: 'sidebar',
    styles: [`
        :host { background-color: green; }         
    `],
    template: `
        <h1>sidebar</h1>
        <ng-content></ng-content>
    `
})
export class SideBarComponent { .... }

Основное приложение css:

<style>
    sidebar {background: red; color: yellow; }
</style>

Это возвращает боковую панель с зеленым фоном и желтым текстом, но я хочу красный фон...

Источник

3 ответа

Решение

Отредактировано:

Как можно найти на http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/: добавить атрибут в тег body:

<body override>
    <app></app>
</body>

И в вашем css: используйте селектор для этого атрибута:

[override] hello-world h1 {
    color:red;
}

Таким образом, ваш CSS не нужно анализировать.

Предыдущее решение:

Я сам нашел решение: вместо того, чтобы связать мой (тематический) css-файл с index.html, который не анализируется, я импортировал этот конкретный css-файл в аннотацию app.component.ts.

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
      <link rel="stylesheet/css" type="text/css" href="/assets/style/app.css" />
    </head>
    <body>
        <app></app>
    </body>
</html>

app.component.ts:

import { ... }
@Component({
    selector: 'app',
    styles: [`
        @import "assets/style/theme.css";
    `], 
    template: `
        ...`,
})
export class AppComponent {...}

theme.css:

sidebar {background: red; }
Источник

Таким способом невозможно перезаписать стили, установленные в стилях компонента. См. Пункт 3 в разделе "Использование стилей компонентов" в документах "Стили компонентов" ( https://angular.io/docs/ts/latest/guide/component-styles.html).

  1. Стили нашего компонента не могут быть изменены путем изменения стилей в другом месте приложения.

С помощью :host-context Вероятно, это лучший способ добиться этого (хотя я никогда не пробовал себя).

Источник

Вы должны попытаться проверить то же самое с host-context, Согласно документации host-context работает так же, как функциональная форма :host(), Он ищет класс CSS в любом предке элемента узла компонента, вплоть до корня документа. Это полезно в сочетании с другим селектором.

В следующем примере мы применяем background-color стиль для всех <h2> элементы внутри компонента, только если некоторый элемент-предок имеет класс CSS theme-light,

:host-context(.theme-light) h2 {
  background-color: #eef;
}
Источник
Другие вопросы по тегам