CSS медиа запрос для mat-list

Question

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

@media (max-width: 1026px) {
  .mat-list {
    font-size: 10px;
  }
}

@media (min-width: 1026px) {
  .mat-list {
    font-size: 60px;
  }
}

, но размер текста по-прежнему не меняется.

Answer 1

Вы должны сделать это в вашей глобальной таблице стилей styles.css.

Answer 2

Возможно, вам может помочь одно из следующих действий:

• Попробуйте связать свою пользовательскую таблицу стилей с последней таблицей стилей CSS
• Поместите медиазапросы в конец файла CSS

Таким образом, вы можете быть уверены, что перезаписали любой существующий CSS.

Answer 3

Попробуйте

::ng-deep {
   .mat-list {
      .mat-list-item {

        @media (max-width: 1026px) {
             font-size: 10px;
        }

        @media (min-width: 1026px) {
            font-size: 60px;
        }

      }

   }
}

Примечание. Работает только в режиме ViewEncapsulation.Emulated и считается устаревшим в официальной документации, но все еще работает как временное решение. Используйте подход style.scss, предложенный @ JuNe