Angular Material - странное поведение с множественным стилем CSS для выбора циновки

Question

Я использую mat-select (среди прочего) элементы Angular Material в своем приложении, и я считаю, что часть настройки действительно сложная.

Мне нужно выбрать несколько с белым текстом, а другие выбрать счерный текст.

Я пытался написать два разных класса в моем файле style.css, например:

.selectWhiteTheme .mat-form-field-label, .mat-select-value, .mat-select-value-text, .mat-expansion-panel-content { color: white !important; }


.selectBlackTheme .mat-form-field-label, .mat-select-value, .mat-select-value-text, .mat-expansion-panel-content { color: black !important; }

Обычно это работает: я применяю selectWhiteTheme илиselectBlackTheme в поле mat-form-field, и выбор будет иметь выбранный цвет.

Странное поведение происходит, когда я пытаюсь использовать этот подход с выбором с фиксированными параметрами (другие цилиндры в списке).Это select:

<mat-form-field class="selectWhiteTheme" >
            <mat-select [(value)]="selectValue" (selectionChange)="onChangeSelect($event.value)">
                <mat-option value="OptionA">OptionA</mat-option>
                <mat-option value="OptionB">OptionB</mat-option>
            </mat-select>
        </mat-form-field>

В этом случае selectBlackTheme переопределяет selectWhiteTheme, но я не могу понять, почему это происходит.

Answer 1

Вы повторяете селекторы, поэтому естественно, что второй имеет приоритет, так как он следует за первым.

.selectWhiteTheme .mat-form-field-label,
.mat-select-value, */ <--this--> /*
.mat-select-value-text,
.mat-expansion-panel-content {
  color: white !important;
}

.selectBlackTheme .mat-form-field-label,
.mat-select-value, */ <same as this etc.--> /*
.mat-select-value-text,
.mat-expansion-panel-content {
  color: black !important;
}

должно быть

.selectWhiteTheme .mat-form-field-label,
.selectWhiteTheme .mat-select-value,
.selectWhiteTheme .mat-select-value-text,
.selectWhiteTheme .mat-expansion-panel-content {
  color: white !important;
}

.selectBlackTheme .mat-form-field-label,
.selectBlackTheme .mat-select-value,
.selectBlackTheme .mat-select-value-text,
.selectBlackTheme .mat-expansion-panel-content {
  color: black !important;
}