如何更改垫子选择高度（样式）？

Question

使用 ::ng-deep 可以解决问题，但它会影响同一模块中的所有 mat-select，那么如何在特定组件中更改 mat-select 样式呢？

::ng-deep .mat-select-panel{
    max-height: none!important;
}

编辑：

<div class="col-md-2 kt-margin-bottom-10-mobile">
                        <div class="kt-form__control">
                            <mat-form-field >
                                <mat-select [(value)]="searchOption"
                                            class="mat-form-field mat-form-field-fluid"
                                            placeholder="Search by...">
                                    <mat-option value="all"><span>All</span></mat-option>
                                    <mat-option value="ref"><span>Reference</span></mat-option>
                                    <mat-option value="name"><span>Name</span></mat-option>
                                    <mat-option value="team"><span>Team</span></mat-option>
                                </mat-select>
                            </mat-form-field>
                        </div>
                    </div>

Answer 1

实际上，垫选择面板位于组件外部，位于

.cdk-overlay-container

中。所以你不能只改变你自己组件的 mat-selects 的 CSS。

你可以做的，就是在选择面板中添加一个类，然后制定一个真正的 ng-deep 规则

<mat-form-field>
    <mat-select [(value)]="searchOption"
                class="mat-form-field mat-form-field-fluid"
                panelClass="auto-height"                    <-- adding class to panel here
                placeholder="Search by...">
        <mat-option value="all"><span>All</span></mat-option>
        <mat-option value="ref"><span>Reference</span></mat-option>
        <mat-option value="name"><span>Name</span></mat-option>
        <mat-option value="team"><span>Team</span></mat-option>
    </mat-select>
</mat-form-field>

在你的 scss 文件中：

::ng-deep .mat-select-panel.auto-height {
  max-height: none;
}

或者更好的是，如果您已经有一个，请将其添加到您的material-overload.scss 文件中。如果没有，请将其添加到您的 styles.scss 文件中，这样您就根本不使用 ng-deep：

.cdk-overlay-container {
  .mat-select-panel.auto-height {
    max-height: none;
  }
}

Answer 2

那么你可以这样做，

// Add an ID to the div in the HTML
<div class="col-md-2 kt-margin-bottom-10-mobile">
     <div class="kt-form__control">
         <mat-form-field id="search-option-id"> <-- Add the ID Here
              <mat-select 
                  [(value)]="searchOption"
                  class="mat-form-field mat-form-field-fluid"
                  placeholder="Search by..."
              >
                   <mat-option value="all"><span>All</span></mat-option>
                   <mat-option value="ref"><span>Reference</span></mat-option>
                   <mat-option value="name"><span>Name</span></mat-option>
                   <mat-option value="team"><span>Team</span></mat-option>
              </mat-select>
         </mat-form-field>
     </div>
 </div>



// In your CSS file, you can do this: 

#search-option-id > mat-select { <-- You can do this in the CSS
  ::ng-deep .mat-select-panel {
    max-height: none!important;
   }
}