Правильная стилизация в textarea в Vuetify?

Question

[Виктор]

В Vuetify есть компонент textarea:

<v-textarea
     :validate-on-blur="true"
     class="vp_textarea"
     label="Описание"
     auto-grow
     outlined
     rows="5"
     row-height="15"
     v-model.lazy="description"
    :rules="[v => !!v || 'Обязательное поле']">
</v-textarea>

Я использовал outlined. Однако при фокусе рамка становится шириной в 2пикселя, как по мне это не всегда нужно и не всегда красиво. Задался целью сделать однопиксельную рамку. Единственно до чего додумался изменить стилями:

<style lang="scss">
   .vp_textarea  {
       fieldset {
           border: 1px solid currentColor!important;
      }
  }
</style>

Если я делаю изолированные стили при помощи scoped не работает.
Мне кажется что вышеуказанный способ не самый лучший.
Можно ли еще как-то поменять 2-ух пиксельную рамку на 1-у пиксельную у textarea???

Answer 1

[Кирилл Романов]

при использовании scoped нужен глубинный селектор https://vue-loader.vuejs.org/guide/scoped-css.html...

Comments

[Виктор]

Работает, спасибо, но не работает если использую препроцессор scss

[Виктор]

Нашел решение для scss может кому пригодится:

<style lang="scss" scoped>
  .vp_textarea {
    ::v-deep fieldset {
      border: 1px solid currentColor!important;
    }
  }
</style>

[Кирилл Романов]

Виктор, так там про ::v-deep и написано