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

Posted 2023-02-22

【中文标题】更改 vuetify v-expansion-panel-content 的填充

【英文标题】：Change padding of vuetify v-expansion-panel-content

【发布时间】：2020-08-15 20:53:44

【问题描述】：

我有多个级联的 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 类

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

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

谢谢！

【问题讨论】：

我认为您需要完成css路径才能使其在组件中工作.v-expansion-panel-content .v-expansion-panel-content__wrap

我试过了，但没用。我在下面的答案中修复了它！无论如何感谢您的快速响应！

【参考方案1】：

所以我把它修好了

#innerExPan > * 
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 50px;

并将id添加到

<v-expansion-panel-content id="innerExPan">
...

【讨论】：

如果你能提供一些关于你的案件的信息，也许我可以帮助你！

好吧，我使用v-expansion-panel，我想删除v-expansion-content__wrap 类的填充。我尝试了以上所有方法，但填充始终存在并且无法覆盖。它真的破坏了我的布局:(

【参考方案2】：

您可以使用VueJS deep selector 来覆盖内容换行的样式，如下所示。该方法将取决于您是否使用 Sass/Scss 等预处理器。

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

某些预处理器，例如 Sass，可能无法正确解析 >>>。在这些情况下，您可以改用 /deep/ 或 ::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;

我正在使用的版本

使用 Vuetify 2.5.x 和 NuxtJS 2.15.x

【讨论】：

` .v-expansion-panel-content::v-deep .v-expansion-panel-content__wrap padding: 0 !important; ` 肯定会使用 vuetify 2.0

很高兴听到它对您有用！

如果您查看此答案中链接的 vue 文档，可能很明显，但请确保将这些更改放在组件中的 <style scoped> .... </style> 中，否则将不会应用

【参考方案3】：

使用 Vuetify Sass 变量$expansion-panel-content-padding

见Vue documentation

如果你使用的是 Nuxt，修改variables.scss

【讨论】：

如何“使用”变量？

@xetra11 添加了 Nuxt 文档的链接

不幸的是，这改变了所有扩展面板的布局，怎么可能只更改特定扩展面板的填充？