Угловой материал нескольких тем

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

И обернул мои нужные компоненты этим классом. Теперь это работает.