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

我正在尝试使用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

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

最佳答案

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

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

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

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