md-checkbox角度材料样式

时间:2017-04-12 11:56:45

标签: css angularjs angular-material2

在Angular4中使用Angular材质,检查后我无法找到更改复选框颜色的方法。

在初始视图中修改样式的唯一方法是:

:host /deep/ .mat-checkbox-inner-container{
     height:15px;
     width:15px; 
     background-color: rgba(0, 255, 0, 0.87);
}

尝试在选中后更改样式,以下内容无效:

:host /deep/ .mat-checkbox-checked {
background-color:yellow;   
}

它实际上是在检查后应用,但是在错误的元素中 - 不适用于内部容器。

:host /deep/ .mat-checkbox-inner-container-checked这样的东西也行不通。

欢迎任何帮助。

4 个答案:

答案 0 :(得分:16)

试试这个:)

WebDriverWait wait = new WebDriverWait(driver, 60, 50);
wait.until(ExpectedConditions.visibilityOfElementLocatedBy.xpath(".//*[@id='image-11']/a/img"))).click();

答案 1 :(得分:4)

尝试这个:)

/deep/ .mat-checkbox-checked.mat-accent .mat-checkbox-background,
       .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background
{
  background-color: rgb(27, 142, 241) !important;
}

/deep/ .mat-ripple-element {
  background: rgba(27, 142, 241, .4) !important;
}

此处/deep/很重要,否则它将不起作用。根据Angular文档:

  

组件样式通常仅适用于组件自己模板中的HTML。

     

使用/deep/刺穿阴影的后代组合器将样式向下强制通过子组件树进入所有子组件视图。 / deep /组合器可应用于任何深度的嵌套组件,并且适用于该组件的视图子级和内容子级。

     

/deep/组合器还具有别名>>>::ng-deep

     

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

答案 2 :(得分:1)

尝试使用.md-checkbox.md-checked参考Checkbox Styling

:host /deep/ .md-checkbox.md-checked .md-icon {
   background-color:yellow!important;   
}

答案 3 :(得分:0)

尝试将encapsulation: ViewEncapsulation.None添加到component.ts文件

和css:

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background: yellow;
}