Vue-dropzone: Custom template is using component styles instead of my styles

[esslamben]

• Vue2-dropzone Version: 2.3.5 (npm list --depth=0)
• Node Version (node -v): v8.2.0
• NPM Version (npm -v): v5.3.0
• OS: macOS Sierra 10.12.16

Description:

Currently using vue-dropzone with a custom template as per the example in docs. I've written my own styles however they seem to be getting overwritten by the component itself.

Steps To Reproduce:

Just follow the Custom Dropzone preview template example and try to use custom styles for e.g the dz-error-mark which has a color: white !important set on it. I can provide a more detailed example but my issue is fairly explanatory. I understand this may not be an issue if so could you point me in the right direction to overwrite the base styles when using a custom template.

Thanks for the package its really nice!

[rowanwins]

Try setting something like
.dz-error-mark i { color: red }
You might also be able to pass in your id selector of the component to add more specificity. Let me know how you get on.

[vrajroham]

@Esslamb I can confirm that, as specified in docs which you mentioned can't override the css!

Meanwhile you can try approach suggested @rowanwins.

I'm on it and I'll update the example! Thanks for pointing it!

[esslamben]

I had already tried that @rowanwins but the <i> element has an !important color attached to it so unless I update the package files I'm unable to overwrite regardless of what css styles I use on my end. The alternative would be to use my own css selectors but then I miss out on the cool fade in animations and opacity functionality.

Thanks for the update @vrajroham. If I could make a suggestion, perhaps allowing the user to have some kind of toggle to turn off styles or make some hooks available for the selectors that have animations attached to them such as the icons. I understand these things can be tedious, I will pull the project tonight and see if I can figure something out to give you guys a hand.

[rowanwins]

Hi @Esslamb

Thanks for the feedback and offer to help. In v3 we'll do away with all the !important selectors so it should be much easier, there will also be a no styles option as well.

[rowanwins]

Hi @Esslamb

V3 is now published with brand new docs including how to override styling (it's now much easier!)

[esslamben]

This is awesome @rowanwins well done!