无法移除Vuetify展开面板内边距的问题求助

问题出在Vuetify的v-expansion-panel内部内容容器默认带有内边距，而你当前的scoped样式无法直接覆盖组件内部的默认样式，需要使用深度选择器来穿透样式作用域。

修改你的代码如下：

<template>
  <v-expansion-panels>
    <v-expansion-panel class="expansion-panel">
        <v-btn @click.prevent="showTextField = !showTextField" color="gray">Kommentar hinzufügen (optional)</v-btn>
        <v-text-field v-if="showTextField" v-model="comment" label="Kommentar" class="comment-field" ref="inputField" @click="$refs.inputField.focus()" autofocus></v-text-field>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

<style scoped>
  .comment-field {
    width: 25em;
    height: 20em;
    margin: 0;
  }

  /* 用深度选择器覆盖展开面板内容容器的内边距 */
  .expansion-panel :deep(.v-expansion-panel-content__wrap) {
    padding: 0;
  }
</style>

补充说明 #

• 如果你用的是Vue 2项目，需要把:deep()替换为>>>或/deep/（根据使用的预处理器调整，比如Sass环境用/deep/）
• 若要让文本框完全填满面板宽度，可将.comment-field的width: 25em改为width: 100%

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