[英]How to overwrite a css from main.component.scss in a child component scss file
I have a scss file for my main component of my Angular 6 Application inside which i have added a css property for an html element. 我为Angular 6应用程序的主要组件提供了一个scss文件,在其中为html元素添加了CSS属性。 I want to overwrite the css property in the scss file in a child component.
我想覆盖子组件的scss文件中的css属性。 I have tried putting
:host /deep/
and !important
. 我试过把
:host /deep/
和!important
。 Nothing works for me. 什么都不适合我。 I have tried changing the css property from the .ts file and it worked.
我试图从.ts文件中更改css属性,它起作用了。 I want to overwrite the same in my scss file only.
我只想在我的scss文件中覆盖相同的内容。
Example: main.component.scss 示例:main.component.scss
.global-content {
margin-left: 12rem;
}
This is the main component scss file. 这是主要组件scss文件。 I am trying to overwrite the same css property from my child component like this
我正在尝试像这样从子组件覆盖相同的CSS属性
child.component.scss child.component.scss
:host /deep/ .global-content {
margin-left: 2rem !important;
}
Thanks in Advance 提前致谢
Please read this post about how to use encapsulation with sass in angular. 请阅读这篇文章,了解如何在angular中使用sass进行封装。 https://blog.angular-university.io/angular-host-context/
https://blog.angular-university.io/angular-host-context/
And also try removing the "/" forward slash. 并尝试删除“ /”正斜杠。 may or may not work depending on your structure.
根据您的结构,可能会或可能不会。
:host {
deep {
.global-content { margin-left: 2rem !important; }
}
}
The above is just a guess as I can not test in here. 以上只是我无法在此处测试的猜测。
or you could use ng-deep css pseudo element: 或者您可以使用ng-deep CSS伪元素:
:host ::ng-deep .global-content { margin-left: 2rem !important; }
I hope it helps. 希望对您有所帮助。
Add Your Global Style sheet 添加您的全局样式表
like 喜欢
app-root app-child .child-div {
//add whatever css property you want to call
}
Ref : You Can Check Here 参考: 您可以在这里检查
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.