Angular Material 多主题

Question

我有一个包含我的主题设置的文件

@import '~@angular/material/theming';
@include mat-core();

$app-primary: mat-palette($mat-cyan, 600);
$app-accent: mat-palette($mat-indigo, 900);
$app-warn: mat-palette($mat-red);

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

@include angular-material-theme($app-theme);

这很好用。但是，现在我需要在一个组件中添加额外的颜色，因此我决定为该特定组件制作另一个主题。

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

$radio-app-primary: mat-palette($mat-cyan, 600);
$radio-app-accent: mat-palette($mat-yellow, 900);
$radio-app-warn: mat-palette($mat-deep-purple);

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

@include angular-material-theme($radio-app-theme);

但这似乎对我的广播组没有任何影响。

这是我的组件的 html

<mat-radio-group [formControl]="control">
        <div class="row">
            <div class="col-6" *ngFor="let option of radioOptions; let i = index">
                <mat-radio-button [value]="option.value" [color]="i == 1 ? 'accent' : null">
                    <mat-form-field class="w-100">
                        <input type="text" matInput [placeholder]="option.label" [readonly]="true"
                               style="pointer-events: none" [value]="option.string">
                    </mat-form-field>
                </mat-radio-button>
            </div>
        </div>
    </mat-radio-group>

我试图从我的自定义主题中寻找样式，但我发现了一些东西，但这似乎不适用于组件的内部 mat 组件。他们仍然使用全局主题颜色。

Answer 1

小型调查表明，创建的选择器存在一些问题。

在css中有[_nghost-c24] .mat-radio-button.mat-accent.mat-radio-checked[_ngcontent-c24] .mat-radio-outer-circle[_ngcontent-c24]

同时，我只能按照这条线到这里[_nghost-c24] .mat-radio-button.mat-accent.mat-radio-checked[_ngcontent-c24] .mat-radio-outer-circle。由于某种原因，在我的 Angular 应用程序中没有这样的标签，但生成的 css 好像 circle 有它。

---

作为一种解决方法，可以为另一个主题创建特殊的类包装器并使用它。重要的是，这种风格应该在全局范围内（即不封装）。在我的例子中，我在我的 styles.scss 的主题下方添加了

$radio-primary: mat-palette($mat-orange, 600);
$radio-accent: mat-palette($mat-indigo, 900);

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

.radio-orange {
    @include mat-radio-theme($radio-theme);
}

并用这个类包装了我想要的组件。现在可以了。