Angular 10: mat-elevation-z не работает ни для одного компонента

Я использую класс mat-elevation-z4 в элементах mat-toolbar e mat-card, и он просто не работает. Даже если я не применяю никакого другого CSS в этих элементах.

Версии:
Angular CLI: 10.0.6
Node: 10.14.2
ОС: win32 x64
Angular: 10.0.9

Приложение работает на рабочем столе Chrome, и я также пробовал в Firefox.

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

.antiBug {
    position: relative;
    z-index: 2;    
}

Моя мат-карта:

<mat-card class="mat-elevation-z4">
    <mat-card-title class="title">Bem vindo!</mat-card-title>
    <mat-card-subtitle class="subtitle">
        Sistema para exemplificar a construção de um cadastro em Angular
    </mat-card-subtitle>
</mat-card>

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

Как я могу это исправить?

PS: по совпадению, в том же проекте у меня есть материальные кнопки, и их стили работают, ЗА ИСКЛЮЧЕНИЕМ матовой кнопки, которая является 3D. Похоже, у Angular возникли проблемы с управлением z-index...

Посмотрите на класс mat.elevation-z8 моей панели инструментов.

введите здесь описание изображения

А вот и моя мат-карта

введите здесь описание изображения


person Lucas Pletsch    schedule 15.08.2020    source источник
comment
Высота указана четными числами, такими как 2,4,6...   -  person Eldar    schedule 15.08.2020
comment
@Эльдар, позволь мне попробовать с четным...   -  person Lucas Pletsch    schedule 15.08.2020
comment
@Эльдар, это не проблема...   -  person Lucas Pletsch    schedule 15.08.2020
comment
он работает демо и его проще всего отслеживать, это просто CSS, можете ли вы проверить элемент и посмотреть, не переопределяется ли ваша тень блока   -  person Stavm    schedule 16.08.2020
comment
Я не очень хорошо понимаю эти инструменты браузера. Но я поместил изображение выше. Посмотрите на класс mat-elevatiion-z8, он не царапается. Это означает, что он не был переопределен, верно?   -  person Lucas Pletsch    schedule 16.08.2020


Ответы (1)


У меня была похожая проблема, но оказалось, что когда я устанавливал Angular Material, он не добавлял ./node_modules/@angular/material/prebuilt-themes/indigo-pink.css в мой Раздел стиля angular.json внутри раздела сборки.

Стиль файла angular.json

После добавления этого кода он работает нормально!

person Humberto Lopes    schedule 23.03.2021
comment
Нашел ответ здесь: github.com/angular/components/issues/13003 - person Humberto Lopes; 23.03.2021
comment
Спасибо, проверю, работает ли - person Lucas Pletsch; 17.04.2021