Html 如何从子组件覆盖全局样式并将更改范围仅在该组件下以Angular

我已经声明了一些全球风格的css样式.css文件，它是src/style.css在我的Angular 项目中.在我的一个组件中，我想覆盖一些样式，并仅为该组件设置范围.目前，我可以通过使用::ng deep来实现这一点，但问题是，当我使用::ng deep从我的子组件更改全局样式时，它也会改变全局中的样式.因此，我的其他组件也会因此受到影响.所以我想要的是，当我从那个子组件更改这个全局样式时，我只想在那个组件下定义这个更改.

我用Src/Style声明的CSS类.css是:

.main-content {
  width: 100%;
  padding: 24px;
}

我应用了以下try ，确实覆盖了全局样式，但是，它也保留了更改，因此其他组件也会受到该更改的影响.

Attempt 1:

我在组件中应用encapsulation: ViewEncapsulation.None，并在组件scss文件中应用以下内容:

.main-content {
  padding: 24px 0px !important;
}

它起作用了，这意味着，它确实覆盖了全局样式，但更改的范围不仅限于此组件.

Attempt 2:

我移除了组件的封装并应用::ng deep，如下所示:

::ng-deep .main-content {
   padding: 24px 0px !important;
}

它也会执行与try 1相同的操作.

Attempt 3:

我还发现，如果使用::ng deep with:host，它只会为该组件定义更改的范围.然而，当我使用:host时，我无法使其工作.就像下面的代码对我的情况没有任何作用:

:host ::ng-deep .main-content {
  padding: 24px 0px !important;
}

在这种情况下，我如何实现覆盖全局css并仅为该组件确定范围？