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

【问题标题】：How to change mat-select height (style)?如何更改垫选择高度（样式）？
【发布时间】：2021-08-31 10:42:59
【问题描述】：

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

::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>

【问题讨论】：

你也可以分享 HTML 吗？如果你直接使用 mat-select 组件，你可以将它包裹在一个 div / mat-form-field 标签周围，并给它一个有意义的 ID，并为这个 ID 添加上面的 CSS。那应该可以解决问题
@SrikarPhaniKumarMarti 我将 HTML 添加到问题中。

标签： css angular sass angular-material frontend

【解决方案1】：

你可以这样做，

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

【讨论】：