角度6不应用scss样式

我有一个组件页面和相应的样式表，但是component.scss中的类不适用于该页面。没有错误，我还在想为什么

这是我的product-detailpage.component.html

<div>
  <h1>Product Detail Page</h1>
</div>

这是.scss文件

body{color:Red !important}
app-product-detailpage{
        h1{color:red !important}
}

然而，我注意到的一件事是，如果我对global styles.css进行更改，它就可以正常工作。只是为了检查一下，我把车身颜色改成了绿色，效果很好

我的angular应用程序配置为与SCS一起使用。原因可能是什么？有人能建议吗？

根据，组件中指定的样式只能应用于其模板，该模板不包括组件

这就是为什么您的样式不能从component的style.scs处理组件，但可以从全局样式表处理

一种方法是根据使用

：host

伪选择器，它允许在放置组件的容器上添加样式

文件上说：

---

主机选择器是指向主机元素的唯一方法。您无法使用其他选择器从组件内部访问宿主元素，因为它不是组件自己模板的一部分。宿主元素位于父组件的模板中。

您的SCS无法用于HTML文件product-detailpage.component.HTML

---

原因是组件的角度使用。这意味着在组件中找不到标记

和

。

因为

Angular

中的默认css封装是

模拟的
（ViewEngular.Emulated
），所以Angular将呈现如下：

input[_ngcontent-c0] {
    border-radius: 5px;
}

因此，如果要将样式设置为当前的
组件
，可以使用
本机选项

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation : ViewEncapsulation.Native
})

它将呈现如下所示：

input {
    border-radius: 5px;
}


但最后，我建议您使用全局scss文件来定义
的样式不，默认情况下角度模拟样式封装是不正确的，当您将视图封装设置为本机
视图封装时，它使用阴影DOM。本机
我有一个类似的问题，并使用“封装.无”解决。我使用rootViewRef以编程方式呈现该组件，因此它没有自己的shadow dom。这是正确答案。请阅读本文，其中有许多孤岛（）ViewEncapsulation.Native不推荐使用ViewEncapsulation.ShadowDom。
input {
    border-radius: 5px;
}