CSS样式不适用于现有组件/身体标签

Question

我有一个7号角的项目，我正在使用路线动态地加载组件，在动态加载的组件样式表中，我为body标签和已经存在的组件标签添加了一些样式，它们没有反映在DOM中。 / p>

body {
padding-bottom: 150px;
}

样式会出现在动态加载的组件样式表中，但是我看不到它们适用于DOM元素。

Answer 1

默认情况下，angular仅将组件中的样式应用于该组件模板中的HTML元素（视图封装）。要覆盖此行为，可以在components指令中设置一个选项。

有关更多信息，请参见https://angular.io/guide/component-styles#view-encapsulation

Answer 2

如果您要在组件中定义样式，则它们将不适用于组件之外。

查看我的StackBlitz template。

1. 我的全局样式在scss /文件夹中定义，以将所有全局样式向下应用于DOM。

2. 然后，仅将组件样式用于覆盖全局样式，或仅将组件特定样式用于项目中没有的其他地方。

这就是我设置Angular样式的方式。让我知道您是否需要更多帮助。