why child component styles overwriting by global css?

angular, css

Solution

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

Problem

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?

Original source