如何设置Angular Material Autocomplete多选复选框选项的高度？

要实现18px高度的多选复选框选项，你需要针对性覆盖Angular Material的默认样式，下面是具体的CSS调整方案：

• 调整选项容器的高度与内边距，确保整体高度符合需求：

.mat-option {
  height: 18px !important;
  line-height: 18px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

• 调整复选框的尺寸与对齐方式，避免复选框和文字错位：

.mat-pseudo-checkbox {
  width: 14px;
  height: 14px;
  top: 2px;
}

.mat-option-text {
  padding-left: 8px;
}

• 调整下拉面板的最小高度，避免选项显示异常：

.mat-autocomplete-panel {
  min-height: auto !important;
}

将以上代码添加到对应组件的CSS文件中，替换原有样式后，就能让多选复选框选项的高度保持在18px，同时保证布局对齐正常。

内容的提问来源于stack exchange，提问作者tedcoder