css 设置材质滑块刻度的样式

ffx8fchx  于 2023-04-08  发布在  其他
关注(0)|答案(1)|浏览(145)

使用@angular /material 12.2
我想添加一些样式(宽度和颜色)到这些刻度,我可以通过修改类.mat-slider-ticks和.mat-slider-ticks-container来更改刻度高度,但它不适用于宽度和颜色。
从angular/components源代码中,我发现了以下内容:

.mat-slider-ticks {
@include vendor-prefixes.private-background-clip(content-box);
background-repeat: repeat;
box-sizing: border-box;
opacity: 0;
transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
}
56lgkhnf

56lgkhnf1#

我可以使用以下规则来实现这一点。请注意,我使用custom-slider类将mat-slider Package 在div中,以避免使用!important。但是,如果您不介意!important覆盖,则可以在全局样式中仅包含内部规则。

.custom-slider {
  .mat-mdc-slider .mdc-slider__tick-mark--active,
  .mat-mdc-slider .mdc-slider__tick-mark--inactive {
    height: 4px;
    width: 4px;
    background-color: red;
  }
}

https://stackblitz.com/edit/angular-ygsg95?file=src%2Fstyles.scss

相关问题