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

这是我的product-detailpage.component.html

  
Product Detail Page

这是.ts文件

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ProductdetailService} from '../productdetail.service';
@Component({
  selector: 'app-product-detailpage',
  templateUrl: './product-detailpage.component.html',
  styleUrls: ['./product-detailpage.component.scss']
})
export class ProductDetailpageComponent implements OnInit {

  constructor(private route: ActivatedRoute, private productData: ProductdetailService) {
    this.route.params.subscribe(params => console.log(params));
   }

  ngOnInit() {
  }

}

这是.scss文件

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

但是我注意到的一件事是，如果我对global styles.css进行了更改，它就可以正常工作。只是检查一下，我将主体颜色更改为绿色，并且可以正常工作。

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

您的SCSS对HTML文件product-detailpage.component.html无效。

原因是Angular将阴影DOM用于组件。这意味着标签，在您的组件中无处可寻。

因为默认的css封装Angular为，所以Angular的渲染如下：Emulated(ViewEncapsulation.Emulated

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

因此，如果要将样式设置为current component，则可以使用Nativeoption。

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

它将呈现为：

input {
    border-radius: 5px;
}

但最后我建议您使用全局 scss文件定义的样式。