角度材料更改复选框颜色

5 回答

• 2

  这应该处理默认的复选框颜色

  md-checkbox .md-icon {
      background: green;
  }
  md-checkbox.md-default-theme.md-checked .md-icon {
      background: green;
  }
  

  点击此处了解更多Angular Material Documentation

  回复于 2024-05-01T13:02:22+08:00
• 1

  对于Angular Material的beta.2， color 属性应该有效 .

  beta之前有一些问题

  查看修复该问题的提交 .

  回复于 2024-05-01T13:02:22+08:00
• 1

  你不要't have to add css if you'使用主题，只需添加属性颜色 <mat-chechkbox>

  <mat-checkbox color="primary">Primary</mat-checkbox>
  

  可以使用color属性更改a的颜色 . 默认情况下，复选框使用主题的强调颜色 . 这可以更改为“主要”或“警告”复选框|角度材料

  回复于 2024-05-01T13:02:22+08:00
• 0

  未选中时，以下内容将保持灰色，但在选中时更改为自定义颜色：

  relevant-scss-file.scss

  mat-checkbox {
    &.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
     background: rgb(0,178,0);
    }
  }
  

  回复于 2024-05-01T13:02:22+08:00
• 12

  其中一种方法是使用/ deep / selector

  mat-checkbox {
      color: rgb(0,178,0);
      /deep/ .mat-checkbox-background {
          background-color: rgb(0,178,0);
      }
  
      /deep/ &.mat-checkbox-focused{
          .mat-ink-ripple{
              background-color: rgba(0, 178, 0, .26);
          }
      }
  }
  

  这将允许您覆盖启用了Shadow Dom的组件中的样式 .

  回复于 2024-05-01T13:02:22+08:00