角材料復選框垂直線

Question

我在Angular Material 復選框時遇到問題，在渲染之后，由於材料中的類，添加了一條附加的垂直線。

這是我的HTML：

<div class="col-md-6 col-sm-12">
   <div class="col-sm-12">
      <mat-checkbox class="full-width" formControlName="TPA_NUSC">{{ 'GLOBAL.TAX_NUMBER_MANDATORY_AB' | translate}}</mat-checkbox>
   </div>
   <div class="col-sm-12">
      <mat-checkbox class="full-width" formControlName="TPA_VLNC">{{ 'GLOBAL.VALIDATE_TAX_NUMBER_AB' | translate}}</mat-checkbox>
   </div>
</div>

這是我的輸出：

該垂直線來自渲染后添加的類“ mat-checkbox”，至少，如果我刪除該類，該線將消失。

關於此問題的任何提示嗎？

Answer 1

我遇到了類似的問題，但意識到我沒有主題。

確保在styles.css中有這樣的內容： @import "~@angular/material/prebuilt-themes/indigo-pink.css";

Answer 2

我發現了問題，似乎有人在我們公司的CSS中添加了一個覆蓋indigo-pink.css的類

非常感謝@Peter Kim，讓我能夠找到問題。

如果任何人都會遇到這樣的問題，那么我就能找到可能出問題的地方。

1. 嘗試在開發人員控制台中獲取最隱蔽的元素

這樣做后，我發現該班學生有接壤權 。

2. 單擊右上角的，引起問題的css文件

3. 它將重新引導您到css文件，但是它可能不會告訴您它是哪個文件，但是您可以轉到index.ts或聲明css的位置並對css進行計數，直到獲得匹配為止，例如，在我的情況下這是第14張紙。

4. 只需轉到該表並搜索問題，就我而言，我搜索了＃b7b7b7，這是直接匹配。

希望它能對其他人有所幫助。