Question

我有可重用的组件“two-column-layout-wrapper”，其样式在主文件.css中。我想在另一个模块中使用这个组件，但我需要不同宽度的2个类。如何覆盖样式？

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 {

}

Answer 1

你有几个选择。

第一个是从你的父组件给你的组件一个类/样式，然后如果你需要有需要更改的内部元素，你可以在父元素CSS中使用/deep/选择器。例如：.parent-appended-class /deep/ .child-element-class { ... }

或者，如果要将CSS保留在子组件中，可以将属性从父组件传递给子组件，以便子组件可以相应地做出反应（通过根据传递的属性设置自己的类）{{ 1}}装饰者。详细解释here。

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 {
}

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

2 个答案: