Как нацелиться на угловой материал степпера с помощью CSS?

Question

Я пытаюсь уменьшить заполнение для углового материала с шагомером, поскольку я разрабатываю компакт из этого:

Чтобы удалить отступ здесь:

В официальной документации по угловым материалам указывается, что вы должны создать конкретный селектор. Я просто не знаю, как это сделать. Я пробовал следующее:

В инструментах Chrome я нашел класс CSS .mat-horizontal-stepper-header. Я пытаюсь уменьшить отступы с 24 до 10 пикселей следующим образом:

.mat-horizontal-stepper-header {
  padding: 14px !important;
}

не работает. Я создал Stackblitz здесь , чтобы проиллюстрировать проблему.

Answer 1

Попробуй это. Добавьте эту CSS к style.css

.mat-stepper-horizontal .mat-horizontal-stepper-header {
    padding: 10px;
    height:auto;
}
.mat-stepper-horizontal .mat-stepper-horizontal-line {
    margin: 0 -4px; 
}