Question

我在index.html中导入一个包含宽度为auto的基本css文件，但是这种样式优先于我在组件中定义的样式（使用宽度为70％）使用styleUrls：[“...” ]。确保我的组件范围的css优先于定义传统方式的样式的最佳方法是什么？我应该将我的全局样式作为我的顶级组件吗？

Answer 1

一般来说，组件中的css是具有priotiry的css。您可以尝试使用

封装：您的app.component中的ViewEncapsulation.None。

如果您的组件中有一个类，它将具有优先级。

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

Answer 2

您可以增加全局css中选择器的特定性。

当你进入unproject

时

<my-comp class="some-class">

然后你可以用

覆盖

.someClass {
  width: 70%;
}

或

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

增加选择器特定性的最佳方法取决于您的具体要求。

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

Answer 3

要覆盖全局scss，只需在您的 component.ts 文件中的行(encapsulation: ViewEncapsulation.None)下方添加：

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

为什么子组件样式被全局css覆盖？

3 个答案: