如何删除垫选项填充

Question

预期结果应如下所示：

我的数组HTML和CSS看起来像这样

HTML：

<ng-container matColumnDef="collaborateurs">
        <th mat-header-cell *matHeaderCellDef class="vueListeTh"> Collaborateurs </th>
        <td mat-cell *matCellDef="let element" class="vueListeTd">
          <mat-select placeholder={{element.collaborateurs[0].nom}} class="collabSelect">
            <ng-container *ngFor="let collaborateur of element.collaborateurs">
              <mat-option [ngSwitch]="collaborateur.acces">
                <div *ngSwitchCase="'COMPLETED'" class="selectCollaborateurCompleted" >
                    {{collaborateur.nom}}
                </div>
                <div *ngSwitchCase="'PREVIEW'" class="selectCollaborateurCompleted" >
                    {{collaborateur.nom}}
                </div>
                <div *ngSwitchCase="'EDITION'" class="selectCollaborateurEdition" >
                    {{collaborateur.nom}}
                </div>
                <div *ngSwitchCase="'WAITING'" class="selectCollaborateurWaiting" >
                    {{collaborateur.nom}}
                </div>
                <div *ngSwitchDefault>
                    {{collaborateur.nom}}
                </div>
              </mat-option>
            </ng-container>
          </mat-select>
        </td>
      </ng-container>

CSS：

.vueListeTh.mat-header-cell, .vueListeTd {
padding: 0px;
  text-align: center;
}
.vueListeTh.mat-header-cell:first-of-type,
.vueListeTd.mat-cell:first-of-type {
  padding-left: 0px;
}
.vueListeTh.mat-header-cell:last-of-type,
.vueListeTd.mat-cell:last-of-type {
  padding-right: 0px;
}

.selectCollaborateurCompleted {
  padding-left: 4px;
  text-align: left;
  width: 100%;
  background-color: #8cc83c;
}

.selectCollaborateurEdition {
  padding-left: 4px;
  text-align: left;
  width: 100%;
  background-color: #ffff00;
}

.selectCollaborateurWaiting {
  padding-left: 4px;
  text-align: left;
  width: 100%;
  background-color: white;
}

我试图将.mat-option属性更改为padding：无，但它不会影响text div的外部填充。 插入.ng-star和mat-select-content也不起作用。

Answer 1

尝试之一

.mat-option {
  padding: 0 !important;
}

要么

:host .mat-option {
  padding: 0;
}

后者也将样式应用于父元素。