Question

我发现了很棒的link如何自定义“材质”切换按钮。我成功设置了background-color和font-weight的设置方式

@import '~@angular/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);

$app-theme: mat-light-theme($app-primary, $app-accent);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);

.mat-button-toggle-checked {
    background-color: mat-color($primary);
    font-weight: bold;
    color:mat-color($primary); // <=== does not work!!!
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

但是，字体本身仍然保持黑色状态-使用color="primary"时，这不是默认颜色。

有什么想法-也应该正确包含fore-color吗？

Answer 1

尝试使用此

Type

如果您只想更改选中按钮的颜色，请尝试

.mat-button-toggle-label-content{
   color:mat-color($primary)
}

Answer 2

感谢@Akhi Akl一世，研究主题之后，我发现了mat-button-toggle颜色为primary的以下解决方案

@import '~@angular/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);

$app-theme: mat-light-theme($app-primary, $app-accent);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);

  .mat-button-toggle-checked {
    background-color: mat-color($primary);
    font-weight: bold;

    .mat-button-toggle-label-content{
        color: $light-primary-text;
    }
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

Answer 3

.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
        line-height: 0px;
        padding: 4px 7px;
    }
    .mat-button-toggle{
        background-color: #B2B2B2;
        color: #ffffff;
    }
    .mat-button-toggle-checked {
        background-color: #48A808;
        color: #ffffff;
    }

在Angular 6（和7）中为Mat-button-toggle

3 个答案: