Vuetify の textarea の line-height を変更したい

Question

お世話になっております。

現在 Laravel と Vue を用いてポートフォリオを作成しているのですが、Vuetify の textarea の line-height を変更する方法をお伺いしたいです。

【現状】
https://gyazo.com/52eacacf4f86259186f16b0ed7923c7a

【実装したいレイアウト（こちらをデフォルトにしたい）】
https://gyazo.com/d154c475651a0b13305121137a176f13

該当のコード

<template>
  <v-container>
    <div class="work">
      <v-row>
        <v-col cols="7">
          <v-textarea
            outlined
            class="textarea"
            name="input-7-4"
            rows="20"
            label="Outlined textarea"
          />
        </v-col>
      </v-row>
    </div>
  </v-container>
</template>

<style>
::deep/ .v-textarea textarea {
line-height: 40px;
}
</style>

コンソール

行った手順は以下です。

⑴ セレクトを以下に変更

① ::v-deep div.v-text-field__slot textarea
② /deep/ div.v-text-field__slot textarea
③ /deep/ textarea
④ ::v-deep textarea
⑤ .v-textarea textarea
⑥ /deep/ .v-textarea textarea
⑦ v-textarea
⑧ .textarea
⑨ .work

⑵ v-textarea 内にline-height を指定

<v-textarea
   v-model="textarea"
   line-height: 1.5rem;
   //一部省略
/>

なお、vue のバージョンは 2.5.17 で vuetify は 2.3.18 です。

【参考にしたサイト】
https://www.tagindex.com/stylesheet/form/line_height.html
https://qiita.com/h-naito/items/f6ca679276282dce2600

セレクタの指定ミスなのか、他に原因があるのか、わからずに困っています。
何卒よろしくお願い致します。

Answer 1

.v-textarea textarea {
line-height: 70px !important;
}

で解決致しました。

Answer 2

deep selectorを使ったことがないし、テストもしてないので検証もできていないですが、
https://designsupply-web.com/media/knowledgeside/4833/
上記サイトによると、親コンポーネントから子コンポーネントにstyleを共有するときに使われるものだと思われます。

普通の子要素にCSSを適用させる方法でやればいいと思います。

.v-textarea textarea {
line-height: 100px;
}

Comments

[Take.Y]

ご回答ありがとうございます。
結局、

.v-textarea textarea {
line-height: 70px !important;
}

とすることで解決致しました。
お騒がせしました。
また機会ありましたらよろしくお願い致します。