Search code examples
vue.jsflatpickr

Applying Style To Flatpickr in VueJS Component

I am trying to style the Flatpickr input box, and not sure how to apply the style.

I have a component that uses imports a Flatpickr component. I am trying to apply style in the

Trying to apply style

ComponentWithPickr.vue

In Template: 

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

Style:

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

Flatpickr - has the Flatpickr code 

ComponentPickr.vue

Style:

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

I've tried to add my class to ComponentWithPickr.vue and also in the ComponentPickr.vue and it's never applied.

What is the way to apply a style to a imported component?

Solution

  • The way you have written it, you are binding to a data property called "pickerstyle", which you have probably not defined on your Vue instance. If you are trying to pass a string to the "classes" prop, then you aren't binding, and therefore you don't need the :.

    I don't know what library you are using that provides the <FlatPickr> component, but if it indeed does support a classes prop, I would assume that it is expecting either a string or an array.

    I would suggest you try either this:

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

    or this:

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

    I also noticed that you are also using the scoped attribute on your style tag. Scoped styles apply only to the component where they are declared. This will scope those styles for ComponentPickr.vue, making them unavailable to FlatPickr. Removing scoped should make those available throughout your application.