时间戳

首页 > 解决方案 > 更改 vuetify v-expansion-panel-content 的填充

css - 更改 vuetify v-expansion-panel-content 的填充

问题描述

我有多个级联的 v-expansion-panels 来可视化文件夹结构。就像在这个例子中的 items 和 innerItems

  <v-expansion-panels
     accordion
     focusable
  >
     <v-expansion-panel
        v-for="(item, x) in items"
        :key="x"
     >
        <v-expansion-panel-header> {{ item.header }}</v-expansion-panel-header>
        <v-expansion-panel-content class="v-expansion-panel-content">
           <v-expansion-panels>
             <v-expansion-panel
                v-for="(innerItem, y) in innerItems"
                :key="y"
             >
                <v-expansion-panel-header> {{ innerItem.header }} </v-expansion-panel-header>
                <v-expansion-panel-content> {{ innerItem.content }} </v-expansion-panel-content>
               </v-expansion-panel>
            </v-expansion-panels>
        </v-expansion-panel-content>
     </v-expansion-panel>
  </v-expansion-panels>

所以我明白了

在此处输入图像描述

但我需要内部扩展面板像这样在右侧

在此处输入图像描述

我通过在浏览器编辑器中编辑 .v-expansion-panel-content__warp 来实现这一点（只是为了得到我想要的样子）但是我怎样才能访问这个自我生成的 div/css-class

在此处输入图像描述

已经有一个关于面板标题的问题（Stylization vuetify component v-expansion-panel__header）但我没有得到这个问题或答案......

也许有人可以指出我正确的方向或遇到同样的问题，并可以告诉我解决这个问题的方法！

谢谢！

标签： cssvue.jsvuetify.js

解决方案

您可以使用VueJS 深度选择器来覆盖内容包装的样式，如下所示。该方法将取决于您是否使用诸如 Sass/Scss 之类的预处理器。

正如 Vue 深度选择器文档所述：

一些预处理器，例如 Sass，可能无法>>>正确解析。在这些情况下，您可以改用/deep/or::v-deep组合符 - 两者都是别名>>>并且工作方式完全相同。

使用 CSS 时

用于>>>访问v-expansion-panel-content__wrap类。

.v-expansion-panel-content>>> .v-expansion-panel-content__wrap {
  padding: 0 !important;
}

使用 SASS/SCSS 时

用于::v-deep访问v-expansion-panel-content__wrap类。

.v-expansion-panel-content::v-deep .v-expansion-panel-content__wrap {
  padding: 0 !important;
}

只修改特定的扩展面板

您还可以添加自定义类/ID 以进一步缩小您想要设置样式的扩展面板的范围。例如：

<v-expansion-panel-content id="expansion-panel-content-1">

可以具体修改如下：

#expansion-panel-content-1::v-deep .v-expansion-panel-content__wrap {
  padding: 0 !important;
}

我正在使用的版本

将 Vuetify2.5.x与 NuxtJS 一起使用2.15.x

推荐阅读