Question

是否可以覆盖：外部angular2-component的主机样式？

我们正在创建一个包含侧栏组件的库。此组件具有默认（后备）背景，但应该可以通过应用程序中使用的css / theme覆盖。

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

主要应用程序：

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

这会返回带有绿色背景和黄色文字的侧边栏，但我想要一个红色背景......

Answer 1

编辑：

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

start

在你的css中：为这个属性使用一个选择器：

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

这样，您的css不必被解析。

以前的解决方案：

我自己找到了一个解决方案：我没有在index.html中链接我的（主题）css文件，而是没有解析，我在app.component.ts注释中导入了这个特定的css文件。

的index.html：

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

app.component.ts：

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

theme.css：

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

Answer 2

不可能以这种方式覆盖组件样式中设置的样式。请参阅＆＃34;使用组件样式＆＃34; “组件样式”文档（https://angular.io/docs/ts/latest/guide/component-styles.html）

中的部分

我们的组件样式无法通过更改样式来更改   申请中的其他地方。

使用:host-context可能是一种更好的方法（尽管我从未尝试过自己）。

Answer 3

您应该尝试使用host-context检查相同内容。根据{{3}} host-context，就像:host()的函数形式一样。它在组件host元素的任何祖先中查找CSS类，一直到文档根目录。与其他选择器结合使用时很有用。

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

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

覆盖封装：主机样式的外部组件

3 个答案:

编辑：

以前的解决方案：