角材6个不同颜色的多个防滑垫

Question

我在页面中有3个'mat-slider'，我希望滑块具有3种不同的颜色。我无法覆盖页面（组件）的主题颜色，因为它将应用于所有滑块。我必须为滑块制作3个不同的组件，并在每个组件中覆盖主题颜色吗？最简单的方法是什么？ 下面是我的角度版本和包装版本，

Angular CLI: 6.0.8
Node: 8.9.4
OS: win32 x64
Angular: 6.0.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.3.0
@angular/cli                      6.0.8
@angular/flex-layout              6.0.0-beta.16
@angular/material                 6.3.0
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

Answer 1

这可能不是最好的方法，但是当您要求最简单的方法是解决方案时。

给每个滑块一个类：

// home.component.hmtl
<mat-slider class="mat-slide-1"></mat-slider>
<mat-slider class="mat-slide-2"></mat-slider>
<mat-slider class="mat-slide-3"></mat-slider>

在styles.scss中引用这些类，并在每个类中定义要更改其颜色并使其重要的元素：

// styles.scss
.mat-slide-1 {
    .mat-slider-thumb {
        background-color: red !important;
    }
}

.mat-slide-2 {
    .mat-slider-thumb {
        background-color: yellow !important;
    }
}

.mat-slide-3 {
    .mat-slider-thumb {
        background-color: green !important;
    }
}

此示例仅更改拇指的颜色，但检查滑块的元素以查找与要更改的元素相关的类。

一个更正确的解决方案是使用多个主题并将它们分别应用于每个组件。请参阅material docs。