Question

我对在角度应用程序中对自定义组件进行样式设置的方法有疑问-是采用Angular Material Theming方法还是采用全局通用样式类。

角度材质主题化方法

这就是我将如何使用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>

全局通用样式定义

现在，如果必须使用自定义样式来设置角度组件的样式，则可以采用以下方法，即在全局级别定义通用类并为_variable.scss文件中的变量定义值

.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材质主题化方法具有任何优势吗？

角材料主题方法与自定义样式定义

0 个答案: