Question

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

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

我对我所拥有的内容非常满意，但我想更改滑块手柄和缩略图的背景颜色。

显然，这是由 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 ，我会得到我想要的东西，但这显然不是正确的方法。

所以问题是改变滑块手柄和缩略图颜色的正确方法，并且为了一般性，如何仅更改一些属性在Angular Material主题中定义的类。

Answer 1

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

要对整个应用程序应用自定义更改，请将自定义类添加到根组件的样式表，通常为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

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

您将需要向滑块添加类：

       <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 4

角度材料组件使用主题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 5

这是我在短短几分钟内解决并使其正常工作的方式。
在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 6

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

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

Answer 7

使用color =“ primary”只是将其设置为默认主题之一。到目前为止，更改背景颜色的唯一方法是

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

这里的任何人都知道如何更改拇指标签中文本的颜色吗？在同一CSS中添加color: #fffff似乎无济于事，它仍然使用黑色作为颜色。

更改角度材质

7 个答案: