Блог

Я использую «vuesax«: «3.11.1» в моем проекте VueJS.

Я не могу найти способ изменить границу ввода vs-input отключен.

 <vs-input
  class="w-5/12 pr-5"
  disabled
  type="text"
  :placeHolder="timeConvert(info.delay_secs)"
  :style="getDelayColor(info.status_color)"
  label="Advance / Late"
/>
  

Я попытался применить встроенный стиль ( style="border: 1px solid #ff0000;" ), но он применяется ко всему компоненту (красный на прикрепленном изображении), в то время как мне нужно изменить цвет границы ввода внутри него (зеленый на прикрепленном изображении).

Проверка html выглядит так vs-inputx vs-input--input normal , но если я попытаюсь добавить стиль css к этому классу, это не сработает.

Та же проблема с добавлением к нему динамического стиля, используя :style и передавая ему функцию (обычный способ выполнения Vue — это также может быть записано как :style="`color: ${info.status_color};`" ). Если я применю его к vs-input, это не будет иметь эффекта. Я не знаю, как настроить таргетинг на элемент внутри него (зеленый на прикрепленном изображении), потому что его нет в шаблоне.

Есть ли какой-нибудь эксперт по библиотеке Vuesax?

Заранее спасибо