CODEWITHSUNDEEP
cssangular
Swetha
Swetha

Reputation: 1079

why child component styles overwriting by global css?

I am importing a base css file in my index.html that includes width as auto, but this style is taking priority over the style I define in components(used width as 70%) using styleUrls: ["..."]. What is the best way to make sure that my component-scoped css takes priority over styling defined the traditional way? Should I have my global styles scoped to my top level component?

Upvotes: 12

Views: 16362

Answers (3)

RohitAneja
RohitAneja

Reputation: 1011

In order to override global scss, simply add below line (encapsulation: ViewEncapsulation.None) in your component.ts file:

  @Component({  selector: 'app-custom-component',
      templateUrl: './custom-component.component.html',
      styleUrls: ['./custom-component.component.scss'],
      encapsulation: ViewEncapsulation.None
    })

Upvotes: 6

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657138

You can increase specifity of the selectors in your global css.

When you have in your <my-comp class="some-class">

.someClass {
  width: 70%;
}

then you can override with

body .some-class.some-class {
  width: 100%;
}

or

body my-comp.some-class.some-class {
  width: 100%;
}

What way to increase specifity of your selector works best for you depends on your specific requirements.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Upvotes: 7

Roninio
Roninio

Reputation: 1771

In general css in your component is the one that has priotiry. You can try to use

encapsulation: ViewEncapsulation.None in your app.component.

if you have a class in your component it would have priority.

https://angular.io/docs/ts/latest/guide/component-styles.html

Upvotes: 8

Related Questions