Как мне манипулировать внешним видом шаблона mat-snack-bar, используя CSS в Angular Material 7

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

Другой ответ, который я увидел: переопределение стиля по умолчанию компонента SnackBar, но по какой-то причине он не работает.

Итак, теперь мои вопросы:

Как мне манипулировать внешним видом шаблона mat-snack-bar с помощью CSS? (Пожалуйста, покажи мне, как:

  1. Сделайте ширину: 100%(когда экран в натуральную величину) и
  2. Сделайте закусочную, чтобы появиться наверху

используя этот пример в стекбизнесе

Спасибо.

Источник

2 ответа

Решение

Вы можете сделать это довольно просто с помощью CSS. Все, что вам нужно сделать, это добавить в файл CSS, в котором вы определяете класс (например, blue-snackbar), следующее:

.blue-snackbar {
  background: #2196F3;
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  max-width: 100% !important;
  width: 100%;
}

Я пойду по тому, что он делает:

  position: absolute; 
  top: 0;
  left: 0;
  right: 0;

Эти строки гарантируют, что закусочная находится сверху (отсюда "top: 0") и простирается на все доступное пространство ("position: absolute" позволяет эту игру размещения)

  max-width: 100% !important;
  width: 100%;

Максимальная ширина позволяет элементу div занимать всю ширину страницы, а width указывает это. Инструкция "! Important" используется, чтобы обойти любой конфликтующий CSS из других стилей.

Источник

Чтобы переопределить стиль mat, вы должны поместить свои классы css в файл style.css, иначе это ничего не даст

Другой способ - изменить режим ViewEncapsulation.

пожалуйста, посмотрите на разницу между ViewEncapsulation.Native, ViewEncapsulation.None и ViewEncapsulation.Emulated

Источник
Другие вопросы по тегам