如何更改 CSS 用于警报消息组件的无法访问的子 class？

Question

我创建了一个具有最大字符数限制的文本区域元素。当达到限制时，它应该显示一条错误消息。我正在使用一个名为 lib-error-alert-message 的预先存在的组件。这就是 HTML 代码的样子 -

<textarea class="my-text" rows="10" maxlength="500" [formControl]="textControl"> </textarea>
<lib-error-alert-message class="alert" *ngIf="(text | async) == 50" [alertMsg]="limitAlertMessage">
</lib-error-alert-message>

我在其他地方使用过这个组件并且工作正常，但是，在这个特定页面中，该组件有一个名为“msgs”的内部 class，它的左边距属性 -3rem.

这导致错误警报和文本区域方向歪斜。在检查元素时，如果我取消选中 margin-left 属性那么它看起来是正确的。我试图为 lib-error-alert-message 创建一个 class“警报”，并为此使用了以下代码 -

.alert {
margin-left: 0 !important;
width: fit-content;
}

但这不会覆盖内部 class“消息”的固有边距属性。我将如何更改内部 class“消息”（我无法访问）的属性以达到我的目的？

Answer 1

将此样式添加到您的全局 styles.scss 文件中。它选择 div with class msgs inside lib-error-alert-message element:

lib-error-alert-message div.msgs {
    margin-left: 0 !important;
    width: fit-content;
}

您不能直接访问库组件是对的，但好消息是全局 styles.scss 应用于所有 dom 元素。

Answer 2

使用 Angular 深度选择器 - 它可用于定位外部库的内部组件

:host ::ng-deep {
   lib-error-alert-message div.msgs {
      margin-left: 0;
      width: fit-content;
   }
}

如何更改 CSS 用于警报消息组件的无法访问的子 class？

How to alter CSS for an inaccessible child class for an alert message component?

html

css

angular