Использование Angular 9 стилей материала локально

Question

Я реализую очень базовые c таблицы, следуя примерам, приведенным в официальных документах .

В этих примерах таблицы имеют приятный стиль, который, казалось бы, локализован для каждой типовой таблицы. , Основной стиль, который я хочу использовать, это mat-elevation-z8 (из того, что я могу сказать). К сожалению, когда я встраиваю эту таблицу в свою страницу, она стилизует всю страницу, вплоть до основного текста. Вот блик стека, который показывает, что я имею в виду:

https://stackblitz.com/edit/angular-5oe5jz

Дивы выше и ниже таблицы оформлены в соответствии с таблицей. Я хочу, чтобы таблица создавалась отдельно, как в примерах. Является ли моя единственная опция go переопределять каждое свойство, которое не должно зависеть от материала?

Answer 1

1) Вам не нужно переопределять каждое свойство, но вы просто используете классы материала CSS, где вам требуется, иначе не добавляйте классы.

2) Например, в вашем stackblitz связывает страницу с дизайном материала, потому что вы применили класс 'mat-app-background basic-container' к div в вашем файле index.html. так что вся страница выглядит с дизайном материала.

3) Удалите этот mat-app-background basic-container из файла index.html и используйте классы CSS материала только для таблиц.

4) Я только что обновил файл index.html для вашей справки. проверьте здесь