Угловой материал флажок вертикальная линия

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

Я обнаружил проблему, кажется, что кто-то добавляет в нашу компанию класс, который переопределяет этот indigo-pink.css

Большое спасибо @Peter Kim за то, что он позволил мне найти проблему.

Если у кого-то возникнет такая проблема, вот как я узнал, что может быть не так.

1. Попробуйте получить закрытый элемент в консоли разработчика

При этом я обнаружил, что класс имеет border-right .

Нажмите в правом верхнем углу, чтобы перейти к css-файлу, который вызывает проблему

Он перенаправит вас в файл css, однако он может не сказать вам, какой это файл, но вы можете перейти к своему index.ts или к тому месту, где вы объявили свой css, и считать css до тех пор, пока не получите совпадение, например,в моем случае это был 14-й лист.

Просто зайдите на этот лист и найдите проблему, в моем случае я искал # b7b7b7, и это было прямое совпадение.

Надеюсь, это поможет кому-то еще.

Answer 2

У меня была похожая проблема, но я понял, что у меня нет темы.

Убедитесь, что у вас есть что-то подобное в styles.css: @import "~@angular/material/prebuilt-themes/indigo-pink.css";