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

Posted 2023-03-06

【中文标题】如何在子组件 scss 文件中覆盖 main.component.scss 中的 css

【英文标题】：How to overwrite a css from main.component.scss in a child component scss file

【发布时间】：2019-03-08 11:16:49

【问题描述】：

我的 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;

提前致谢

【参考方案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; 

希望对你有帮助。

【讨论】：

也许是这个？ :host(.global-content) margin-left: 2rem !important;

【参考方案2】：

添加您的全局样式表

喜欢

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

参考：You Can Check Here