如何移除Vuetify中v-select组件的默认padding内边距

问题描述 #

项目中使用Vuetify的v-select组件，代码如下，需要移除组件默认的padding内边距：

<v-select
  :items="cities"
  class="select--menu"
  label="Solo field"
  solo
  hide-details
  hide-selected
  dense
  append-icon="mdi-chevron-down"
  prepend-icon="mdi-map-marker-outline"
></v-select>

实现方案 #

组件已绑定自定义类select--menu，直接通过样式覆盖即可实现，两种常用方案可按需选择：

方案1：深度选择器覆盖组件默认类 #

非scoped环境下直接写入以下样式规则：

.select--menu .v-input__control {
  padding: 0 !important;
}
.select--menu .v-input__slot {
  padding: 0 !important;
  min-height: auto;
  align-items: center;
}
/* 可按需取消前后图标多余边距 */
.select--menu .v-input__append-inner,
.select--menu .v-input__prepend-inner {
  margin: 0 !important;
}
/* 可按需取消选中项多余内边距 */
.select--menu .v-select__selection {
  padding: 0 !important;
}

Vue单文件组件中使用scoped样式时，需要添加深度穿透标识：

• Vue2 项目使用>>>语法穿透：

.select--menu >>> .v-input__control {
  padding: 0 !important;
}
/* 其余内部选择器前统一加>>>前缀即可 */

• Vue3 项目使用:deep()语法穿透：

.select--menu :deep(.v-input__control) {
  padding: 0 !important;
}
/* 其余内部类统一放入:deep()括号内即可 */

方案2：覆写Vuetify内置CSS变量（推荐） #

无需深度穿透，代码更易维护，直接在自定义类上覆写组件预设变量即可：

.select--menu {
  --v-input-padding-top: 0;
  --v-input-padding-bottom: 0;
  --v-input-control-height: 36px; /* 可按需调整组件整体高度，dense+solo模式默认高度为40px */
}

若覆写变量后出现文字、图标垂直偏移，在.v-input__slot对应规则中添加align-items: center即可修正对齐问题。

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