Angular Подход к теме материала и определения пользовательских стилей

Question

У меня есть вопрос о подходах, которые мы можем использовать для стилизации пользовательских компонентов в приложении angular - будь то go с помощью подхода Angular Material Theming или go с глобальным обобщением c классы стилей.

Angular подход к теме материала

Таким образом, я бы выделил пользовательский компонент angular, используя Angular рекомендации по теме материала

// Import theming functions
@import '~@angular/material/theming';

.my-carousel {
  // Get the default hue for a palette.
  color: mat-color($primary);

  background-color: mat-color($accent, 300);

  // Get a relative color for a hue ('lighter' or 'darker')
  outline-color: mat-color($accent, lighter);

  // Get a contrast color for a hue by adding `-contrast` to any other key.
  border-color: mat-color($primary, '100-contrast');
}

В файле HTML компонента я бы использовал что-то вроде

<div class="my-carousel">
    <!-- some carousel related code -->
</div>

Global generi c определение стиля

Сейчас если бы мне пришлось использовать собственные стили для стилизации моего angular компонента, я мог бы go с помощью следующего подхода, где я определяю обобщенный класс c на глобальном уровне и определяю значения для переменных в _variable.scss file

.card-background{
    background-color:$bs-background-color-secondary;
    background-color:$bs-color-primary;
    outline-color:$bs-outine-primary;
    border-color:$bs-border-primary;
}

В файле HTML компонента я использовал бы что-то вроде

<div class="card-background">
    <!-- some carousel related code -->
</div>

Это помогает мне иметь одинаковый внешний вид в приложении без повторения определений стиля.

Есть ли Какое преимущество дает Angular подход к тематике материала по сравнению с пользовательскими обобщенными классами c стилей применения тем?