Mat-pseudo-checkbox 图标偏离中心且比平时小答案

【问题标题】：Mat-pseudo-checkbox icon off-center and smaller than usualMat-pseudo-checkbox 图标偏离中心且比平时小
【发布时间】：2020-06-15 16:25:52
【问题描述】：

在实现复选框列表时，我注意到选中复选框时的标记没有按照应有的方式设置样式。当我将它与文档进行比较时，我注意到它要小得多并且偏离中心。我开始怀疑这是否与我的其他 css 有关，或者我是否遗漏了什么。

HTML

<div class="general-wrapper">
  <h3>Users ({{participants.length}})</h3>
  <div class="wrapper">
    <div class="filterbar">
      <mat-icon>search</mat-icon>
      <div class="form-wrapper">
        <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
      </div>
    </div>

    <div>
      <mat-form-field>
        <mat-label>Columns</mat-label>
        <mat-select [formControl]="columns" multiple>
          <mat-select-trigger>
            {{columns.value ? columns.value[0] : ''}}
            <span *ngIf="columns.value?.length > 1" class="additional-selection">
              (+{{columns.value.length - 1}} {{columns.value?.length === 2 ? 'other' : 'others'}})
            </span>
          </mat-select-trigger>
          <mat-option *ngFor="let column of selectedColumns" [value]="column">{{column}}</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
... rest of page
</div>

CSS

::ng-deep .mat-focused .mat-form-field-label {
  /*change color of label*/
  color: #f59225 !important;
}

::ng-deep.mat-form-field-underline {
  /*change color of underline*/
  background-color: #f59225 !important;
}

::ng-deep.mat-form-field-ripple {
  /*change color of underline when focused*/
  background-color: #f59225 !important;
  ;
}

::ng-deep .mat-primary .mat-pseudo-checkbox-checked {
  background: #f59225;
}

.download-btn {
  background-color: #f59225;
  color: #f9f9f9;
}

.additional-selection {
  opacity: 0.75;
  font-size: 0.75em;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

}

.form-wrapper {
  width: 100%;
}

.filterbar {
  display: flex;
  align-items: center;
  width: 50%;
}

mat-form-field {
  width: 100%;
}

mat-table {
  margin: 5px;
  width: 100%
}

.mat-row:hover {
  cursor: pointer;
  background-color: gainsboro;
}

.spinner-card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.general-wrapper {
  width: 90%;
  margin: 0 auto;
}

body,
html {
  width: 100%;
}

mat-cell:last-of-type {
  margin-right: 0px;
}

mat-cell {
  word-wrap: break-word;
  word-break: normal;
  margin-right: 8px;
}

.status ::ng-deep .mat-progress-spinner circle,
.mat-spinner circle {
  stroke: #f59225 !important;
}

这是我的复选框目前的样子：

【问题讨论】：

我为这个问题提供了一个 CSS 修复，但作为一般评论，您应该尽量避免使用 ng-deep 运算符。它们是deprecated，您可以有效地制作全局 CSS，而无需将 CSS 放入全局 CSS 文件中，因此维护它变得更加麻烦。

标签： html css checkbox angular-material

【解决方案1】：

这只是库本身的 CSS 问题。我在我自己的图书馆实例中注意到了同样的事情。您可以使用自己的覆盖垫样式来修复它。

使用下面的 css，我认为最终结果看起来好多了。

.mat-option .mat-pseudo-checkbox-checked::after {
  top: 3px;
  width: 11px;
  height: 5px;
  border-left: 3px solid currentColor;
}

【讨论】：