如何在Angular中调整垫子芯片的尺寸

Question

我想知道是否有办法将垫子芯片的尺寸缩小到较小的尺寸，然后再使垫子形式的字段也缩小到较小的尺寸。现在，我的筹码垫形字段确实很大，并且大小与其他字段（例如描述字段）几乎相同，因此我希望筹码的形字段将其自身缩小，以便看起来更好。

任何帮助或建议将不胜感激。

        <mat-chip-list #chipList>
            <div>
                <mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"
                    (removed)="remove(superTag)">
                    <img class="super-icon" src="/assets/images/icons/super-tag-icon.svg">
                    {{superTag.tag}}
                    <mat-icon matChipRemove *ngIf="removable" matTooltip="Remove a super tag">cancel</mat-icon>
                </mat-chip>
            </div>
            <div>
                <input matInput  #input [(ngModel)]="tagIn" [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addTag()">
                <!-- <img class="icon" src="/assets/images/icons/chevron-down-icon.svg" alt="down"> -->
            </div>
        </mat-chip-list>

.form{
    // display: flex;
    width: calc(100% - 80px);
    height: 10px;
}

.icon{
    margin-top: -12px;
}

.super-icon{
    width: 15px;
    margin-right: 8px;
}
.is-loading ::ng-deep .mat-option-text {
    display: flex;
    justify-content: center;
  }

Answer 1

您可以减小填充值。为此工作：

mat-chip {
  padding: 4px 9px !important;
}

相应地调整值。另外，您可以根据需要更改字体大小。

Answer 2

这是我使用的方法：

:host ::ng-deep .mat-chip-list-wrapper mat-chip {
  padding: 0 8px;
}