如何在子组件 scss 文件中覆盖来自 main.component.scss 的 css

Question

我有一个scss文件，用于我的Angular 6应用程序的主要组件，其中我为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

请阅读这篇文章，了解如何在角度中使用带有 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
}

参考 ： 你可以在这里查看