Можно ли вытащить отдельный CSS для каждого компонента в Angular Material?

Question

Согласно Документация по угловым материалам необходимо включить всю тему , чтобы структура работала правильно. Очевидно, что вся тема содержит стили для всех компонентов.

Однако я собираю библиотеку компонентов и извлекаю только определенный компонент из Angular Material. Исходя из этого, мне нужна возможность включать только стили для отдельного компонента.

Есть ли способ включить стили для определенного компонента?

Я понимаю, что может быть решение пойти и взять стилизацию из источника, но было бы предпочтительнее иметь более "органичный" подход, который инкапсулирует реализацию и отразит изменения в моем компоненте, когда Angular Material будет обновлен.

Answer 1

Попробуйте сделать вот так

в theme.scss вы написали

// Define the theme.
$component1-primary: mat-palette($mat-indigo);
$component1-accent:  mat-palette($mat-pink, A200, A100, A400);
$component1-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the theme styles for only specified components.
.component1-light-theme{
   @include angular-material-theme($component1-theme);
}

добавьте целый родительский элемент к вашему компоненту и добавьте component1-light-theme к этому элементу, например

в компоненте html

<div class="component1-light-theme">
  //all other elements
</div>