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

Question

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

我选择了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 是覆盖主题类的方法，如 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 2

您可以使用::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的例子

Answer 3

Angular 材质组件正在使用主题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

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

您需要向滑块添加类：

       <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;
}

:host有关组件样式的官方 Angular 文档::ng-deep中的所有信息