角度材料复选框垂直线

Question

我遇到了Angular Material checkbox的问题，在渲染后，由于材质中的类而添加了一条额外的垂直线。

这是我的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，这是一个直接匹配。

希望它有所帮助。