如何在Angular中调整垫芯片的大小答案

【问题标题】：how to resize mat chip in Angular如何在Angular中调整垫芯片的大小
【发布时间】：2020-10-06 08:02:46
【问题描述】：

我想知道是否有办法将mat-chip 和mat-form-field 调整为更小的尺寸？目前，我的芯片mat-form-field真的很大，几乎和其他字段一样大小，例如描述字段，所以我希望芯片的表单字段和芯片本身更小。

<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;
}

【问题讨论】：

标签： html css angular typescript angular-material

【解决方案1】：

您可以减少填充值。对我来说，这很有效：

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

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

【讨论】：

这只有在你关闭view encapsulation时才有效，建议不要这样做
@pjpscriv 不仅如此，您还可以将此样式放入您的全局 styles.css 中，它也可以正常工作。如果您希望它仅在特定组件的上下文中工作，您可以将其添加到选择器中。
您还需要将最小高度值覆盖为更小的值

【解决方案2】：

这是我使用的方法：

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

【讨论】：