在使用 Angular 进行前端开发时，我们通常需要为组件添加特定的样式来实现UI设计。而这些样式通常都以 CSS 文件的形式存在。那么在 Angular 中，我们如何将这些 CSS 样式引入到组件中呢？
使用 styleUrls 引入外部 CSS 文件
我们可以使用 @Component 装饰器的 styleUrls 属性来指定要加载的 CSS 样式文件。示例如下：
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
// ...
}上面的代码中，我们通过 styleUrls 属性将 ./my-component.component.css 文件引入到了组件中。
需要注意的是，如果引入的样式文件的路径不是相对于当前组件文件的，请使用绝对路径或相对于项目根目录的路径。
使用 styles 直接在组件中定义样式
除了通过 styleUrls 属性引入外部 CSS 文件外，我们还可以直接使用 styles 属性在组件中定义样式。示例如下：
-- -------------------- ---- -------
------------
--------- -------------------
------------ --------------------------------
------- -
---------- - ------ ---- ---
--- - ---------- ---- --
-
--
------ ----- -------------------- -
-- ---
-上面的代码中，我们通过 styles 属性定义了两个 CSS 样式：.my-class 和 h1。这些样式只会在当前组件中生效。
需要注意的是，如果在 styles 属性中定义了多个样式时，每个样式之间需要使用逗号 , 分隔开来。
组件样式与全局样式的优先级
在 Angular 应用中，组件样式的优先级比全局样式高。也就是说，组件样式中定义的样式会覆盖全局样式中定义的样式。
如果想要在组件中使用全局样式，并保持全局样式的优先级高于组件样式，可以在组件样式中使用 :host 和 ::ng-deep 伪类。
示例如下：
-- -------------------- ---- -------
----- -
-------- ------
----------------- -----
-------- -----
-
--------- -
--------- -
------ ----
-
-上面的代码中，host 伪类可以用来定义组件本身的样式，而 ng-deep 伪类可以用来覆盖组件中使用的全局样式。
总结
在 Angular 中使用样式是非常简单的。我们可以使用 styleUrls 引入外部 CSS 文件，也可以使用 styles 直接在组件中定义样式。而组件样式和全局样式之间的优先级关系也需要认真考虑和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646806b4968c7c53b08425cb