css - 自定义扩展面板__header高度

Question

使用 Vuetify 1.3.0，尝试制作比默认更薄的扩展面板。

默认情况下，它似乎会渲染相当大的 ime，但我找不到调整元素高度的正确规则。

我尝试调整标题样式填充(默认情况下为 12px 24px)，但这只是改变了我的标题在整个面板内容中的位置，所以显然还有其他东西正在设置父元素高度，我只是看不到追踪它。

我的组件现在是(简化的)这样:

<template>
  <section>
    <v-expansion-panel>
      <v-expansion-panel-content>
        <header class='layout row justify-spaces ma-0' slot='header'>
          <span class='caption flex' v-text='title'/>
        </header>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </section>
</template>
<style>
  .v-expansion-panel__header: {
      padding: 6px 12px;
  }
</style>

不知何故，元素的实际高度被设置为 48px，但它显示为灰色，这意味着它是在运行时计算的，我找不到导致该高度的因素。沿着 DOM 树向上走，我将行高设置得小得多，清除了所有边距和填充等。没有运气。

Answer 1

可以在生命周期中修改样式

    mounted() {
        // Reformat vuetify Headers
        $('.v-expansion-panel__header').toggleClass('pl-2 pa-0 ma-0', true);
        $('.v-expansion-panel__header').css('min-height' ,'30px');
    }