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);
}

并用该类包装我所需的组件。现在可以了。

角材质多个主题

1 个答案: