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

Question

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

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

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

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

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

с использованием этого примера в stackbiz

Спасибо.

Answer 1

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

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

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

Answer 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%;

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