Как стилизовать ошибки ввода Vue Formulate?

Question

Я пишу веб-сайт на Vue.js, и для обработки пользовательского интерфейса я хочу использовать Vue Formulate. В целом это работает, но у меня проблемы со стилем ошибок ввода. Итак, я попытался сделать очень простой пример изменения цвета фона из списка ошибок, но это не сработало.

Это мой простой компонент:

<template>
  <div>
    <p>Test for VueFormulate</p>
    <FormulateInput
      type="text"
      validation="required"
    />
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
  li.formulate-input-error {
    background-color:green;
  }
</style>

После загрузки сайта и наличия элемента списка ошибок я могу изменить цвет фона в инструментах разработчика Google Chrome. Но не bevor.

Я надеюсь, что кто-нибудь сможет объяснить, что мне нужно сделать, чтобы это сработало.

Answer 1

Ваш блок стиля ограничен, что означает, что вы не можете стилизовать элементы, которые не находятся в вашем непосредственном <template>(в этом смысл определения объема). У вас есть три варианта:

1. Удалить scoped часть вашего <style>блок. Я не рекомендую это делать.
2. Переместите общие стили формы в глобальный файл css. Я бы рекомендовал это, если вы используете более 1 входа.
3. Используйте глубокий селектор, например ::v-deep. Это отлично подходит для переопределения от случая к случаю и позволяет вам выбирать элементы, которые глубже, чем ваша текущая "область действия". Вот пример:

<style scoped>
.formulate-input::v-deep li.formulate-input-error {
  background-color: green;
}
</style>