why child component styles overwriting by global css?

Question

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?

Answer 1

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

Answer 2

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