Question

我为Angular 6应用程序的主要组件提供了一个scss文件，在其中为html元素添加了css属性。我想覆盖子组件的scss文件中的css属性。我试过放:host /deep/和!important。什么都不适合我。我试图从.ts文件中更改css属性，它起作用了。我只想在我的scss文件中覆盖相同的内容。

示例： main.component.scss

.global-content {
  margin-left: 12rem;
}

这是主要组件scss文件。我正在尝试从我的子组件中覆盖相同的CSS属性

child.component.scss

:host /deep/ .global-content {
  margin-left: 2rem !important;
}

预先感谢

Answer 1

请阅读这篇文章，了解如何在angular中使用sass进行封装。 https://blog.angular-university.io/angular-host-context/

并尝试删除“ /”正斜杠。取决于您的结构，它可能会或可能不会起作用。

:host { 
   deep { 
      .global-content { margin-left: 2rem !important; }
   }
}

以上只是我无法在此处进行测试的猜测。

或者您可以使用ng-deep css伪元素：

:host ::ng-deep .global-content { margin-left: 2rem !important; }

希望对您有帮助。

Answer 2

添加您的全局样式表

喜欢

app-root app-child .child-div {
   //add whatever css property you want to call
}

Ref：You Can Check Here

如何从子组件scss文件中的main.component.scss覆盖CSS

2 个答案: