设置 vuetify 扩展面板组件的 max-width答案

【问题标题】：Setting max-width of vuetify expansion panel component设置 vuetify 扩展面板组件的 max-width
【发布时间】：2019-06-14 08:43:53
【问题描述】：

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

这是一个codepen链接：

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

它没有效果，扩展面板是全宽的。我怎样才能让它工作？

【问题讨论】：

Codepen 链接不起作用
这个怎么样？
那个有效。面板已经有max-width: 100%，但是当我使用<v-expansion-panel style="max-width:500px;"> 时，它尊重宽度。
我没有看到您可以在the docs 中为该组件传递max-width 属性

标签： javascript vue.js vuetify.js nuxt.js

【解决方案1】：

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

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

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

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

【讨论】：

谢谢。我无法让组件居中对齐 - 你知道怎么做吗？我尝试添加 class= 'center-align'，没有运气。
您可以使用组件来应用这些样式，这是在视口中间设置样式的组件示例：codepen.io/anon/pen/gqYBmz。有关如何使用网格布局的更多信息，请参阅VuetifyJS docs
谢谢，我有后续stackoverflow.com/questions/54295405/…

【解决方案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 添加到元素中的类。

【讨论】：