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将具有选定的颜色。

当我尝试将这种方法与具有固定选项的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;
}

角材料-带有多个CSS样式的异常行为，用于垫选择

1 个答案: