設置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添加到元素的類。