Vuetify 3：设置Autocomplete/Select列表项高度与文字大小

步骤1：定位目标元素类名 #

按下F12打开浏览器开发者工具，在下拉列表展开状态下，用选择器工具点击列表项，查看元素的CSS类（比如UI库自带的类名：MUI的.MuiAutocomplete-option、AntD的.ant-select-item-option）。如果类名是动态生成的，直接用元素结构或属性定位。

步骤2：编写全局CSS规则 #

根据定位结果，添加以下全局CSS（按需调整数值）：

针对MUI组件

/* 覆盖MUI Autocomplete/Select的列表项 */
.MuiAutocomplete-option,
.MuiMenuItem-root {
  padding: 6px 16px !important; /* 减少上下内边距 */
  line-height: 1.3; /* 缩小行高 */
  font-size: 14px; /* 调整字体大小 */
}

针对AntD组件

/* 覆盖AntD Select/Autocomplete的列表项 */
.ant-select-item-option {
  padding: 4px 12px !important;
  line-height: 1.2;
  font-size: 14px;
}
/* 同步调整分组标题的紧凑度（如果有） */
.ant-select-item-group-title {
  padding: 4px 12px;
  font-size: 13px;
}

通用兜底方案（适配无固定类名的组件）

如果组件类名动态变化，用结构/属性选择器定位：

/* 匹配所有role为listbox的下拉列表子项 */
div[role="listbox"] > div,
ul[role="listbox"] > li {
  padding: 5px 10px !important;
  line-height: 1.2;
  font-size: 14px;
}

注意事项 #

• 若组件库样式优先级更高，需添加!important强制覆盖，或使用更具体的选择器（比如结合组件父容器的自定义类）。
• 调整后测试页面，确保其他组件未被意外影响，必要时给目标组件添加自定义类（如compact-select），再编写更精准的规则：

  .compact-select .ant-select-item-option {
    padding: 4px 12px;
  }
  

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