css - Angular 材质选择表单控件的动态样式

Question

我在一个项目中使用 Angular Materials，并且我正在尝试对 mat-select 表单控件进行一些动态样式化来满足要求。

我想覆盖某些选择器元素的默认颜色，并在确认选择后将它们更改为另一种颜色（见下图）。我已经让它部分工作，但我不知道这是否是最好的方法。我正在使用 ::ng-deep 选择器来获取适用的 DOM 元素（从我在网上找到的一些示例拼凑而成）。它有效，我能够将自定义样式应用于元素。我知道我不推荐使用 ::ng-deep 选择器，但不知道如何做到这一点。

为了进行颜色更改，我将表单字段包装在一个容器中，在该容器中我使用 ngClass 和条件语句来覆盖“默认”颜色。这样做的问题是 .mat-select-panel 元素的自定义样式不再起作用。

任何有关如何使其工作的输入，也许是比使用 ::ng-deep 选择器更好的方法。

.ts

<div class="table-select-selection" 

  [ngClass]="{'table-select-selection-success': (!selectingTable && selectionSuccessful)}"
  
>

  <h3 class="mat-subheading-2">Select Sheet</h3>

  <mat-form-field appearance="standard">

    <mat-label>Worksheets</mat-label>

    <mat-select panelClass="dialog-selection-box" [(ngModel)]="tableName" (ngModelChange)="onTableChange()">

        <mat-option *ngFor="let table of tableNames" [value]="table">

            {{ table }}

        </mat-option>

    </mat-select>

  </mat-form-field>
  
</div>

.scss

.table-select {

    &-selection {

        ::ng-deep {

            $details-color: rgb(168, 168, 168);
    
            .mat-form-field-infix {
    
                font-size: 16px;
                padding-left: 5px !important;
    
            }
    
            .mat-select-arrow {
    
                color: $details-color !important;
    
            }
    
            .mat-select-panel {
    
                .mat-option[aria-selected="true"] {
                    
                    color: $details-color !important;
    
                }
    
                .mat-option-text:hover {
    
                    font-weight: bold !important;
    
                } 
    
            }
    
            .mat-form-field {
    
                width: 100%;
    
                .mat-input-element {
                    color: $details-color !important;
                }
                .mat-form-field-label {
                    color: $details-color !important;
                    margin: 5px;
                }
                .mat-form-field-underline {
                    background-color: $details-color !important;
                }
                .mat-form-field-ripple {
                    background-color: $details-color !important;
                }

            }
    
        }

        &-success {

            ::ng-deep {

                $details-color: green;
        
                .mat-form-field-infix {
        
                    background-color: rgba(0, 128, 0, 0.25);
        
                }
        
                .mat-select-arrow {
        
                    color: $details-color !important;
        
                }
        
                .mat-form-field {
        
                    .mat-input-element {
                        color: $details-color !important;
                    }
                    .mat-form-field-label {
                        color: $details-color !important;
                    }
                    .mat-form-field-underline {
                        background-color: $details-color !important;
                    }
                    .mat-form-field-ripple {
                        background-color: $details-color !important;
                    }

                }
        
            }

        }

    }

标签： cssangularangular-material