如何从vuetify的v-select组件中移除填充

Question

如何移除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>

Answer 1

试试下面的代码片段:

new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
cities: [1,2,3]
}
}
})

.my-select .v-input__slot {
padding: 0 !important;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container>
<v-select
:items="cities"
class="select--menu my-select"
label="without padding"
solo
hide-details
hide-selected
dense
append-icon="mdi-chevron-down"
prepend-icon="mdi-map-marker-outline"
></v-select>
</v-container>
<v-container>
<v-select
:items="cities"
class="select--menu"
label="with padding"
solo
hide-details
hide-selected
dense
append-icon="mdi-chevron-down"
prepend-icon="mdi-map-marker-outline"
></v-select>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Answer 2

如果我没记错的话，vuetify使用自己的自定义组件。要从父组件中输入vue组件样式，需要使用vuesdeep-selector: https://www.telerik.com/blogs/understanding-vue-deep-css-selector

根据您使用的版本，它是>>>,::v-deep甚至:v-deep()。