如何从子组件覆盖全局样式并仅在 angular 中将该更改范围限定在该组件下

Question

我在我的 angular 项目中的 src/style.css 全局 style.css 文件中声明了一些 css 样式。在我的一个组件中，我想重写一些样式并将其范围限定为该组件。目前，我可以通过使用 ::ng-deep 来做到这一点，但是，问题是，当我使用 ::ng-deep 从我的子组件更改全局样式时，它也会将 global.scss 中的样式更改为结果我组件的其余部分也对此产生了影响。所以我想要的是，当我从该子组件更改此全局样式时，我只想将更改范围限定在该组件下。

我在Src/Style.css声明的CSSclass是：

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

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

尝试 1：

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

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

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

尝试 2：

我删除了组件的封装并应用 ::ng-deep 如下所示：

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

它也与尝试 1 相同。

尝试 3：

我还发现，如果我将 ::ng-deep 与 :host 一起使用，它的范围仅为该组件的更改。但是，当我使用 :host 时，我无法让它工作。就像下面的代码对我的情况没有任何作用：

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

在这种情况下，我怎样才能实现覆盖全局 css 并将其范围仅用于该组件？

Answer 1

我假设您在多个地方使用 .main-content。

如果是这样，我会完全避免使用 ::ng-deep，将其从您的子组件中删除。相反，我只是将新的 class 添加到您的 .main-content 元素中，如下所示：

.alternate-content {
   color: red;
}

<div class="main-content alternate-content"></div>

您也不需要在此处使用 !important，因为选择器更加具体。

或者，如果您可以在组件中定义特定于 .main-content 实例的选择器，则可以省略 .alternate-content：

.my-component-container {
  .my-component-panel {
    .main-content {
      color: red;
    }
  }
}

Answer 2

最简单的方法是使用Javascript。

我们假设 main-content 有 id="main"。

你只需要在子组件的ngOnInit中添加这段代码：

element: HTMLElement;

constructor(
  .
  .
  @Inject(DOCUMENT) private document: Document,
) { }

ngOnInit() {
   this.element = this.document.getElementById('main');
   this.element.classList.add('your-custom-class');
}

并在 ngOnDestroy() 中删除这个 class:

ngOnDestroy(): void {
   this.element.classList.remove('your-custom-class');
}

如何从子组件覆盖全局样式并仅在 angular 中将该更改范围限定在该组件下

How to override global style from a child component and scope the change only under that component in angular

html

css

angular-components

angular