html - 如何删除垫选项填充

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: none，但它不会影响文本 div 的外部填充。 .ng-star-inserted 和 mat-select-content 也不起作用。

Answer 1

试试吧

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

或

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

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