设置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

一种快速方法是将样式直接应用于扩展面板组件，就像使用内嵌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应用于vuetify组件，如下所示：

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

vuetify组件只是html元素，并且应用了一些类，因此您只需按类访问它们的CSS。另一个例子，如果您只想将css应用于以这种方式嵌套的一个特定元素:( v-container内v-layout内的v-card）

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

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