CODEWITHSUNDEEP
javascriptcssangular
Italik
Italik

Reputation: 696

How to override styles of reusable component in Angular2?

I have reusable component "two-column-layout-wrapper" which styles are in main file .css. I want to use this component in another module, but I need different width of 2 classes. How can I override styles?

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 {

}

Upvotes: 3

Views: 1780

Answers (2)

Gal Talmor
Gal Talmor

Reputation: 1014

You have a couple of options.

The first is to give your component a class/style from its parent, and then if you need to have inner elements that need to change you can use the /deep/ selector in the parent element CSS. For example: .parent-appended-class /deep/ .child-element-class { ... }

Alternatively if you want to keep the CSS in the child component, you can pass an attribute from the parent to the child so that the child can react accordingly (by setting its own class according to the attribute passed) using the @Input decorator. Detailed explanation here.

Upvotes: 3

Yordan Nikolov
Yordan Nikolov

Reputation: 2678

That way ?

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

Upvotes: 2

Related Questions