如何设置 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 devtools 中更改背景颜色。但不喜欢。

我希望有人能解释我必须做些什么才能让它发挥作用。

Answer 1

您的样式块是有范围的，这意味着您不能为不在您直接 <template> 中的元素设置样式（这就是范围界定的重点）。您有三个选择：

删除 <style> 块的 scoped 部分。我真的不推荐这个。
将您的通用表单样式移至全局 css 文件。如果您使用超过 1 个输入，我会推荐这个。
使用像 ::v-deep 这样的 deep selector。这非常适合逐个覆盖，并允许您 select 比当前“范围”更深的元素。这是一个例子：

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

如何设置 Vue Formulate 输入错误的样式？

How to style Vue Formulate input errors?

styles

vue-formulate