Переопределение свойства фона (высота + цвет) в HTML

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

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

В В этом ответе правильно сказано, что

высота: 100% равна высоте области просмотра. Либо не указывайте высоту, либо используйте min-height: 100%;

Теперь я недавно включил стили angular-material в приложение, которое имеет тег body как:

html, body {
    height: 100%;
    color: rgba(0, 0, 0, 0.87);
    background: white;
    position: relative;
}

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

body {
    background-color: #edecec !important;
    height: 100%;
}

Любые предложения о том, как это сделать, приветствуются.