Vue-carousel: Avoid using aggressive styles

[hdodov]

Very nice component, but it's hard to customize it visually. I need to restyle the prev/next buttons, but it's harder because they're styled from within the component. Even worse, the styles are scoped, so they have an even bigger specificity. This sucks, especially if you're using BEM and you're writing low-specificity selectors.

I think styles should be separated and not put in the SFC. Instead, they should be in a stylesheet with low specificity that you can include in your app if you need them. If you don't need the default styles, you can simply not include them and set your own.

[rico-ocepek]

I did exactly what you are asking for and IMO it wasn't particularly difficult.

Inside the component which uses the carousel you can just use the /deep/ selector which tells webpack (or whatever module bundler you are using) that this style should also affect child components

And as every style directive receives the same scoping attribute when compiling it does not actual effect the specificity of your selectors if you use the /deep/ selector

[hdodov]

Alright, good point. But that doesn't change the fact I need to overwrite styles that I don't need. I'd be better off if I could avoid having them added in the first place.

[quinnlangille]

@hdodov we're actually working on a full component rewrite right now for the v1 release - this will ideally include functional components and separate styles! I'll ping here once we get to that point if you'd like to make some contributions or have any additional input :octocat:

[hdodov]

Sounds awesome! Thank you very much!

[quinnlangille]

Forgot to close this with my last comment - closing now!