我創建了一個具有最大字符限制的 textarea 元素。當達到限制時，它應該顯示一條錯誤訊息。我正在使用一個名為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”的內部類，它的 margin-left 屬性為 -3rem。
這導致錯誤警報和文本區域方向歪斜。在檢查元素時，如果我取消選中 margin-left 屬性，那么它看起來是正確的。我嘗試為 lib-error-alert-message 創建一個“警報”類，并為此使用以下代碼 -
.alert {
margin-left: 0 !important;
width: fit-content;
}
但這不會覆寫內部類“msgs”的固有 margin-left 屬性。為了達到我的目的，我將如何更改內部類“msgs”（我無法訪問）的屬性？
uj5u.com熱心網友回復：
將此樣式添加到您的全域 styles.scss 檔案中。它在lib-error-alert-message元素中選擇帶有msgs類的 div ：
lib-error-alert-message div.msgs {
margin-left: 0 !important;
width: fit-content;
}
您沒有直接訪問庫組件的權限是正確的，但好訊息是全域 styles.scss 應用于所有 dom 元素。
uj5u.com熱心網友回復：
使用 Angular 深度選擇器 - 它可用于定位外部庫的內部組件
:host ::ng-deep {
lib-error-alert-message div.msgs {
margin-left: 0;
width: fit-content;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/469201.html
上一篇：當所有元素都使用同一個類時，如何使當前：懸停元素位于頂部
下一篇：如何讓每個折疊按鈕單獨作業？