我对在角度应用程序中对自定义组件进行样式设置的方法有疑问-是采用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材质主题化方法具有任何优势吗?