Как избавиться от горизонтальной ширины 100% на angular материалах стружки?

Question

Я работаю над проектом материала Angular и столкнулся с проблемой. Я пытаюсь использовать вертикально сложенные чипы, но когда я использую предопределенный код, ширина чипов составляет 100%. Есть ли способ сбросить значение ширины в классе mat-chip-list-stacked? Я не хочу, чтобы чипы имели полную горизонтальную ширину.

<mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
  <mat-chip>Papadum</mat-chip>
  <mat-chip>Naan</mat-chip>
  <mat-chip>Dal</mat-chip>
</mat-chip-list>

Вот как выглядит код:

Вот как я хочу, чтобы код выглядел следующим образом:

Answer 1

Чтобы сбросить ширину, мы можем go с ниже css.

.mat-chip-list .mat-chip {
  width: auto;
  min-width: 0;
}

Answer 2

Если вы используете Angular 9, вы можете перезаписать стили компонента mat-chip. Вы можете либо установить максимальную ширину определенной длины,

mat-chip {
  max-width: 50px;
}

, либо перезаписать ширину, используя объявление !important:

mat-chip {
  width: 50px!important;
}

Если вы используете что-либо ранее Angular 9, вам придется классифицировать свойства, выбрав нужные CSS классы.

.mat-chip-list .mat-chip {
  width: 50px;
}