更改 Angular Material 的 md-slider 的默认背景颜色

Question

我正在使用 Angular Material 版本 2.0.0-beta.8

的 md-slider

我选择了 indigo-pink 主题并将其导入 style.css

我对自己拥有的东西非常满意，但我只想更改 滑块手柄 和 缩略图 [=37] 的背景颜色=].

显然这是由 indigo-pink.css 文件中定义的以下 css 代码设置的：

.mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill{background-color:#ff4081}

其实我改indigo-pink.css就得到了我想要的，但这显然不是正确的做法

所以问题是只更改 slider handle 和 thumbnail 颜色的正确方法，为了一般性，如何仅更改 Angular Material.
主题中定义的类的部分属性

Answer 1

您可以使用 ::ng-deep 覆盖预建样式表中的任何 css class。

要为整个应用程序应用自定义更改，请将自定义 class 添加到根组件的样式表，通常是 styles.css。

css 自定义 md-slide-toggle:

/* CSS to change Default/'Accent' color */

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: blue; /*replace with your color*/
}

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: skyblue;  /*replace with your color*/
}

/* CSS to change 'Primary' color */

::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: green;
}

::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #ff99ff;
}

/* CSS to change 'Warn' color */

::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: red;
}

::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #ffe066;
}

Plunker example

Answer 2

::ng-deep 是覆盖主题类的方式，如 Nehal 所述。

如果你连接更多类，它似乎不起作用。换句话说，下面的代码不起作用

::ng-deep .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill {
    background-color: black;
}

虽然以下版本的代码实际有效并有效地覆盖了主题 css

中设置的值

::ng-deep .mat-accent .mat-slider-thumb {
    background-color: black;
} 
::ng-deep .mat-accent .mat-slider-thumb-label {
    background-color: black;
} 
::ng-deep .mat-accent .mat-slider-track-fill {
    background-color: black;
}

Answer 3

Angular material 个组件正在使用主题 https://material.angular.io/guide/theming

可以这样更改滑块的背景颜色：

@include mat-slider-theme(map_merge(mat-light-theme, (
    accent: mat-palette(map_merge($mat-deep-orange, (
        500: green,
    ))),
    foreground: (
        base: #848484,
        slider-min: white,
        slider-off: #bebebe,
        slider-off-active: #bebebe,
    ),
)));

Answer 4

以下是我如何在短短几分钟内解决问题并使其正常运行。
在 style.css 中添加这两行，而不是在组件 CSS.

中

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color:#0056ff;//Your color
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: #0056ff;//Your color
}

Answer 5

通过设置颜色更改滑块颜色

<mat-slide-toggle color="primary" [(ngModel)]="wifiStatus">Wifi</mat-slide-toggle>

Answer 6

如果您想一次覆盖一个滑块的颜色，即将自定义样式应用于每个滑块：

您需要将类添加到您的滑块：

       <mat-slider class="average"
        thumbLabel
        [displayWith]="formatLabel"
        tickInterval="1000"
        min="1000"
        max="5000"
        (change)="updateValue($event)"
      ></mat-slider>
      <mat-slider class="min"
        thumbLabel
        [displayWith]="formatLabel"
        tickInterval="1000"
        min="1000"
        max="5000"
        (change)="updateValue($event)"
      ></mat-slider>
      <mat-slider class="max"
        thumbLabel
        [displayWith]="formatLabel"
        tickInterval="1000"
        min="1000"
        max="5000"
        (change)="updateValue($event)"
      ></mat-slider>

然后在您的 CSS 中，您可以这样自定义它们中的每一个：

:host ::ng-deep .average .mat-slider-thumb {
  background-color: #ff3967;
}

:host ::ng-deep .min .mat-slider-thumb {
  background-color: blue;
}

:host ::ng-deep .min .mat-slider-thumb-label {
  background-color: blue;
}

:host ::ng-deep .min .mat-slider-track-fill {
  background-color: blue;
}

:host ::ng-deep .max .mat-slider-thumb {
  background-color: orange;
}

:host ::ng-deep .max .mat-slider-thumb-label {
  background-color: orange;
}

:host ::ng-deep .max .mat-slider-track-fill {
  background-color: orange;
}

the offical Angular documentation for component styles

中关于:host和::ng-deep的所有信息

Answer 7

使用 color="primary" 只是将其设置为默认主题之一。到目前为止，更改 background-color 的唯一方法是

/deep/.mat-accent .mat-slider-thumb, 
/deep/.mat-accent .mat-slider-thumb-label,
/deep/.mat-accent .mat-slider-track-fill {
    background-color: #128CB0;
}

这里有人知道如何更改 thumb-label 中文本的颜色吗？在同一个 css 中添加 color: #fffff 似乎没有帮助，它仍然使用黑色作为颜色。

更改 Angular Material 的 md-slider 的默认背景颜色

Change default background color of md-slider of Angular Material

angular-material2