Применение темы углового материала только к определенному компоненту

Question

Можно ли применить встроенную тему углового материала только к определенному компоненту?

Я сделал:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

В одном из моих файлов component.scss и ссылался на этокак styleUrl внутри файла component.ts.Но стили не были применимы к моему угловому материалу-пагинатору.

Вот как выглядит пагинатор

Как показано,стили не применяются.

Это как-то связано с тем, что я импортирую их в файл scss для конкретного компонента, а не импортирую в angular.json?

Answer 1

Вы должны использовать Mixins @ angular / material, а не использовать предварительно созданную тему.

@import '~@angular/material/theming';
@include mat-core();

// Use the desired palette
$palette:  mat-palette($mat-indigo);
// Create the theme
$theme: mat-light-theme($palette, $palette);

// Include component specific mixin
@include mat-dialog-theme($theme);

// Or wrap inside another selector to scope the styles to only one specific component
my-component {
   @include mat-dialog-theme($theme);
}

Редактировать: этот код должен быть в вашем styles.scss (глобальном, а не компонентно-специфическом scss)