如何在Angular2中覆盖可重用组件的样式？

Question

我有一个可重复使用的组件 "two-column-layout-wrapper"，它的样式在主文件.css中。我想在另一个模块中使用此组件，但我需要不同宽度的两个类。我该如何覆盖样式？

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Response } from '@angular/http';


@Component({
selector: 'italik-managepackages',
styles: [` 
    :host { 
        display: flex;
    }
`],
template: `
    <div two-column-layout-wrapper>
        <div sidebar-component italik-managepackages-overview></div>
    </div>
`
})
export class ManagePackagesComponent {

}

- Italik

---

创建一个新的自定义CSS，复制规则，设置新的属性值并在主要CSS之后加载它。 - Asons

Answer 1

您有几个选项。

第一个是从父级为您的组件分配一个类/样式，然后如果您需要更改内部元素，可以在父元素CSS中使用/deep/选择器。 例如：.parent-appended-class /deep/ .child-element-class { ... } 或者，如果您想保留子组件中的CSS，则可以从父级向子级传递属性，以便子级可以根据传递的属性做出反应（通过设置自己的类），使用@Input装饰器。详细解释在这里。

- Gal Talmor

---

好的。但是我必须把这些样式放在哪里？ 样式：[` :host { display: flex; } .max-width-300px /deep/ .max-width-500px { width:800px !important; } `],像这样吗？ - Italik

是的，您应该将它放在父组件的样式中，这将影响子组件。 - Gal Talmor

Answer 2

当时就这样做？

@Component({
  template: `
    <h1>Parent/h1>
    <child [style.color]="'blue'"></test-cmp>
  `
})
export class ParentComponent {
}

@Component({
  selector: 'child',
  template: `
    <h1>Child text should be blue</h1> 
  `,
  styles: [`
    :host{color: red; } 
    `
})
export class ChildComponent {
}

- Yordan Nikolov