Vuetify.jsのコンポーネントのdividerのCSSを変更して、長さを調節したい。

Question

Nuxt.jsを使用したプロジェクトで、フレームワークにはVuetify.jsを使用しております。
dividerの長さを変更したいと思い下記のようなコードを作成し、
cssから直接変更できるのではと思ったのですが、できずに非常に困っております。
どなたかご教示いただけませんでしょうか？

    <template>
       <divider class="test"/>
    </template>
    <style lang="scss" scoped>
       .test{ width:100px}
    </style>

Comments

[kuma_kuma_]

Nuxt.jsが無いのでのコードじゃなくてHTMLとCSSのコード教えて
(その時点でCSSが適応されているかどうか判断つくけど)

Answer 1

v-divider はwidth100%に設定されているため、wrapperコンポーネントを設けてそのコンポーネントの幅を指定すると良いと思います。

<div style="width: 100px">
  <v-divider></v-divider>
</div>

Comments

[takochan1192]

なるほど！wrapperのコンポーネントとしてdivを用いてそこにstyleをつけることで、
幅を変更することができるのですね！！
ありがとうございます！非常に参考になりました！！