垫复选框自定义颜色无法更改

时间:2019-01-13 11:57:05

标签: css angular angular-material

我在项目中使用的是Angular Material,但我想更改mat-checkbox的颜色,但是不想使用主题,所以我在Chrome浏览器中过分使用了Elements和Styles部分并跟踪了mat-checkbox的类使用并发现了以下内容:“。mat-checkbox-ripple .mat-ripple-element”。

::ng-deep .mat-checkbox-ripple .mat-ripple-element {
  background-color: black!important;
}

所以,这是我的代码,我尝试了:: ng-deep,/ deep /,并且没有任何结果,结果始终相同,复选框的颜色未更改,但是在“样式”中我可以清楚地看到它说我已经覆盖了它的颜色。

enter image description here

enter image description here

以下是我使用的一些版本:

"@angular/animations": "^7.1.4",
"@angular/cdk": "^7.2.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/material": "^7.2.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",

如何更改颜色?

4 个答案:

答案 0 :(得分:3)

ripple是单击“材料”组件时显示的水滴波纹效果的名称,因此您定位的元素错误。

尝试:

// overwrite the checkbox background
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: black !important;
}

// overwrite the ripple overlay on hover and click
::ng-deep .mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element {
  background-color: black !important;
}

答案 1 :(得分:3)

在styles.scss中使用全局scss,应该可以。

library(dplyr)
library(tidyr)
df %>% group_by(bb_type, .drop = FALSE) %>%
  count() %>% 
  ungroup() %>% mutate(Sum = sum(n)) %>% 
  pivot_wider(.,names_from = bb_type,values_from = n) 

# A tibble: 1 x 5
    Sum fly_ball ground_ball line_drive  `NA`
  <int>    <int>       <int>      <int> <int>
1    10        1           1          1     7

答案 2 :(得分:1)

对我来说,上面的答案在覆盖表中的样式时不适用于不确定状态,但是下面的代码可以做到

:host ::ng-deep .mat-checkbox-indeterminate,
.mat-checkbox-checked {
    &.mat-primary .mat-checkbox-background {
        background-color: $ your-color !important;
    }
    &.mat-accent .mat-checkbox-background {
        background-color: $ your-color !important;
    }
    &.mat-warn .mat-checkbox-background {
        background-color: $ your-color !important;
    }
}

答案 3 :(得分:0)

使用CSS来.mat-checkbox-background

::ng-deep .mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
  background: pink!important;
}

See working code