[Vue]標準コンポーネントのスタイルを変えられない時にやったこと

概要

Vue2で、V-autocompleteにchips指定があるのとないのとで、高さが揃ってないのを直したかった。
下記でいう、セレクトボックス2の方の高さを低くしたい。

<v-autocomplete
v-model="select1"
class="select1"
:label="セレクトボックス1"
:items="items1"
item-text="name"
/>

<v-autocomplete
v-model="select2"
class="select2"
:label="セレクトボックス2"
:items="items2"
item-text="name"
chips
multiple
/>

しかし、scopedスタイルに上書き指定しても、適用されない。

<style scoped>
.select2 {
  min-height: 33px;
}
</style>

開発コンソールで見たセレクトボックス2のhtml

<div class="v-select__slot">
  <label for="input-229" class="v-label v-label--active theme--light primary--text" style="left: 0px; right: auto; position: absolute;">セレクトボックス2</label>
    <div class="v-select__selections">
        <input id="input-229" type="text" autocomplete="off">
    </div>
    <div class="v-input__append-inner">
        <div class="v-input__icon v-input__icon--append"><i aria-hidden="true" class="v-icon notranslate mdi mdi-menu-down theme--light primary--text"></i></div>
    </div>
    <input type="hidden">
</div>

方法１

refをつけて、onMounted()で処理

// テンプレート側
<v-autocomplete
ref="customChipsAutocomplete"
v-model="select2"
:label="セレクトボックス2"
:items="items2"
item-text="name"
chips
multiple
/>

// コンポーネント側
const customChipsAutocomplete = ref();

onMounted(() => {
    // chips版のautocompleteの高さを調整。
    if (customChipsAutocomplete.value) {
      const selectionsElement = customChipsAutocomplete.value.$el.querySelector('.v-select.v-select--chips .v-select__selections');
      if (selectionsElement) {
        selectionsElement.style.minHeight = '33px';
    }
});

return {
  customChipsAutocomplete
}

これでもまぁいいかと思ってたけど、その後
きちんとした方法があるはずだと思い、調べた結果が以下になります。

方法2

ディープセレクタを使う

.v-autocomplete /deep/ .v-select__selections {
  min-height: 33px;
}

方法1も柔軟性ありそうで、また困ったときに使えるかもしれないので、備忘録として残しておきます。