覆盖外部组件封装的 :host-style

Question

是否可以覆盖外部 angular2 组件的 :host-styling ？

我们正在制作一个包含侧边栏组件的库。该组件具有默认（后备）背景，但这应该可以被应用中使用的 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>

这个 returns 带有绿色背景和黄色文本的边栏，但我想要红色背景...

Answer 1

你应该尝试检查 host-context 是否相同。根据 documentation host-context 就像 :host() 的函数形式一样工作。它在组件宿主元素的任何祖先中查找 CSS class，一直到文档根。与其他选择器结合使用时很有用。

在下面的示例中，我们将 background-color 样式应用于组件内的所有 <h2> 元素，前提是某些祖先元素具有 CSS class theme-light.

:host-context(.theme-light) h2 {
  background-color: #eef;
}

Answer 2

无法以这种方式覆盖组件样式中设置的样式。请参阅组件样式文档 (https://angular.io/docs/ts/latest/guide/component-styles.html)

中 "Using Component Styles" 部分的第 3 点

Our component's styles cannot be changed by changes to styles elsewhere in the application.

使用 :host-context 可能是实现此目标的更好方法（尽管我自己从未尝试过）。

Answer 3

已编辑：

在 http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/ 上找到：向 body-tag 添加一个属性：

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

并且在您的 css 中：为此属性使用选择器：

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

这样，您的 css 就不必解析了。

上一个解决方案：

我自己找到了一个解决方案：我没有在 index.html 中链接我的（主题）css-file，它没有被解析，而是在 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; }

覆盖外部组件封装的 :host-style

Overriding the encapsulated :host-style of external component

css

encapsulation

angular

已编辑：

上一个解决方案：