设置Vuetify扩展面板组件的最大宽度

Question

我正在尝试使用vuetify和nuxt构建网页。 我正在尝试设置扩展面板ui组件（ https://vuetifyjs.com/en/components/expansion-panels ）的max-width属性。 我有：

<div id="app"     max-width="800">
  <v-app id="inspire"     max-width="1200"
>
    <v-expansion-panel     max-width="1200">
      <v-expansion-panel-content
        v-for="(item,i) in 5"
        :key="i"
                                     max-width="1200"

      >
        <div slot="header"     max-width="1200"
>Item</div>
        <v-card     max-width="1200">

          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</div>

这里是一个代码笔链接：

https://codepen.io/anon/pen/YBKXeL?&editable=true&editors=101

其无效，并且扩展面板处于全宽。 我该如何工作？

Answer 1

一种快速的方法是像往常一样使用style="maxWidth: 700px; CSS将样式直接应用于扩展面板组件， style="maxWidth: 700px;

这是您的Codepen中的示例： https ://codepen.io/anon/pen/exOpGy

另一种方法是在JS端声明您的样式，并使用v-bind:style引用它们，如下所示：

https://codepen.io/anon/pen/mvbeXd

Answer 2

我通常不喜欢使用'style'属性。

知道您可以应用自定义CSS来对组件进行验证，如下所示：

.v-expansion-panel {
    max-width: 500px
}

vuetify组件只是具有某些类的html元素，因此您只需按类访问它们的css。 另一个示例，如果您只想将CSS应用于以这种方式嵌套的一个特定元素：（V卡位于V容器内的V布局内）

.v-container > .v-layout > .v-card {
    // insert css here
}

您可以检查html元素，并查看通过vuetify添加到元素的类。