Angular :如何从组件中覆盖全局样式

/* 在组件的样式文件中 */
:host {
  display: block;
  background-color: yellow;
}

/* 在组件的样式文件中 */
::ng-deep .global-class {
  color: red;
}

/* 在组件的样式文件中 */
.parent .global-class {
  color: blue !important;
}

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class MyComponent {}

/* styles.css */
.global-style {
  background-color: green;
}

// my-component.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  encapsulation: ViewEncapsulation.None // 可选，根据需要使用
})
export class MyComponent {}

/* my-component.component.css */
::ng-deep .global-style {
  background-color: red;
}