角材料复选框垂直线

Question

我在Angular材质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. 尝试在开发人员控制台中获取最隐蔽的元素

这样做，我发现该班级有 border-right 。

1. 在右上角单击以转到导致问题的css文件

1. 它将重新引导您到css文件，但是它可能不会告诉您它是哪个文件，但是您可以转到index.ts或声明css的位置并对css进行计数，直到获得匹配为止，例如，就我而言，这是第14张纸。

1. 只需转到工作表并查找问题，就我而言，我搜索了＃b7b7b7，这是直接匹配项。

希望对其他人有所帮助。