В библиотеке компонентов Vuetify есть компонент v-text-field. У него есть параметр hint. Как я могу обратится к стилям этого параметра, например изменить его цвет
-
Попробуйте поискать в документации нужный стилевой параметр (SASS). Если такого нет, то попробуйте отыскать нужный слот и заменить дефолтную в нём разметку своей. Тогда и стилями получится управлять напрямую. Если же нет ни стилевых параметров, ни нужных слотов, то тогда уже сложности.– Жека Диулин10 янв 2020 в 13:59
-
Также стоит упомянуть, что компоненты Vue могут принимать объекты стилей через отдельные свойства, если такие предусмотрены. К сожалению не знаю можно ли расковырять компонент, найти нужный тег и точечно изменить его стили. И тем более стоит ли вообще так делать.– Жека Диулин10 янв 2020 в 14:02
-
Спасибо за отклик. К сожалению, в документации по Vuetify среди переменных SASS я не нашёл нужной мне. И пошёл немного другим путём. Через свойство this.$el.– Serhii12 янв 2020 в 20:06
1 ответ
Изменил стили параметра hint компонента v-text-field через свойство экземпляра $el, которое предоставляет корневой элемент DOM.
А именно, внутри компонента v-text-field я обратился к this.$el и получил в ответ следующее:
<div class="v-input__control">
<div class="v-input__slot">.....</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper">
<div class="v-messages__message message-transition-enter-to">текст находящийся в hint</div>
</div>
</div>
</div>
</div>
Далее я получил div внутри которого находится текст hint-a:
hintDiv = this.$el.getElementsByClassName('v-messages theme--light')[0]
После чего добавил ему 'my-class' с нужными мне стилями:
hintDiv.classList.add('my-class')