在 VueJS 组件中将样式应用于 Flatpickr

Question

我正在尝试为 Flatpickr 输入框设置样式，但不确定如何应用该样式。

我有一个使用导入 Flatpickr 组件的组件。我正在尝试在

中应用样式

正在尝试应用样式

ComponentWithPickr.vue

在模板中：

    <FlatPickr
        id="pickr"
        :classes="pickrstyle"
        v-show="false">
    </FlatPickr>

风格：

<style lang="scss" scoped>
    .pickrstyle{
      background-color: red
     }
</style>

Flatpickr - 有 Flatpickr 代码

ComponentPickr.vue

风格：

<style lang="scss" scoped>
    .pickrstyle{
      background-color: red
     }
</style>

我已经尝试将我的 class 添加到 ComponentWithPickr.vue 以及 ComponentPickr.vue 中，但它从未应用过。

如何将样式应用于导入的组件？

Answer 1

按照您编写的方式，您绑定到一个名为 "pickerstyle" 的数据属性，您可能未在您的 Vue 实例上定义该数据.如果你试图将一个字符串传递给 "classes" 属性，那么你没有绑定，因此你不需要 :。

我不知道您使用的是哪个库提供了 <FlatPickr> 组件，但如果它确实支持 classes 道具，我会假设它需要一个字符串或一个数组。

我建议你试试这个：

<FlatPickr
  id="pickr"
  classes="pickrstyle"
  v-show="false">
</FlatPickr>

或者这个：

<FlatPickr
  id="pickr"
  :classes="['pickrstyle']"
  v-show="false">
</FlatPickr>

我还注意到您还在样式标签上使用了 scoped 属性。作用域样式 仅应用于声明它们的组件 。这将为 ComponentPickr.vue 限定这些样式，使它们对 FlatPickr 不可用。删除 scoped 应该使它们在您的整个应用程序中可用。

Applying Style To Flatpickr in VueJS Component