The library is great, but I would like to show my use case.
I implemented the library and the default styles are fine, except the box-shadow does not work in our UI. It's creating a nasty scene due to CSS specificity.
It's proving quite difficult to just override the style. It has the potential to cause issues later if the library is updated depending how I customize what is provided in node_modules/vue-popperjs/dist/css/vue-popper.css
.
It's a problem because our project is using Tailwind CSS, so I am trying to apply ultra-low specificity classes which are not working.
I would prefer to just not use the default styling from the popper
class, but the library comes with additional styles that have bearing on z-index and absolute positioning, so those would be nice for our project to not have to care about, but I would prefer to control everything else related to appearance.
<template>
<v-popper trigger="click" :options="{ placement: 'bottom' }" enter-active-class="shadow-lg">
<div class="popper">
<div class="flex flex-col">
<a :href="defaultAction" class="no-underline text-grey-darkest hover:bg-pink-lighter py-2 px-4">
CSV
</a>
<a :href="urlsAction" class="no-underline text-grey-darkest hover:bg-pink-lighter py-2 px-4">
CSV with URLs
</a>
</div>
</div>
<button slot="reference" class="flex items-center justify-center text-center rounded-full w-8 h-8 bg-pink hover:bg-pink-darker mr-2 no-underline text-white" title="Download">
<i class="fas fa-download"></i>
</button>
</v-popper>
</template>
The problem stems from here:
I do not want any of these styles:
.popper {
width: auto;
background-color: #fafafa;
color: #212121;
text-align: center;
padding: 2px;
display: inline-block;
border-radius: 3px;
position: absolute;
font-size: 14px;
font-weight: normal;
border: 1px #ebebeb solid;
z-index: 200000;
-moz-box-shadow: rgb(58, 58, 58) 0 0 6px 0;
-webkit-box-shadow: rgb(58, 58, 58) 0 0 6px 0;
box-shadow: rgb(58, 58, 58) 0 0 6px 0;
}
except the ones that cause the popover to load in the correct place. Using Tailwind, if I want those props, I will add them as these classes:
class="popper bg-grey text-black text-center p-2 font-base border shadow-lg"
I am reporting this because the only way I was able to change the box-shadow was to add a more-specific CSS declaration:
div .popper {
box-shadow: none;
}
but then I cannot add shadow-lg
class to the class="popper"
div because it isn't as specific.
Hopefully that makes sense. It would work better if the library just provided a hook like containerClass
where I could add the styles I want.
It's a problem because I could copy/paste the library's popper class styles but that brings implicit risk later if someone updates the library. They would require to know that the styles were overridden in a custom way. The solution would not be immediately obvious if that occurred.
It's a problem because I want the default CSS that the library uses to load the popover correctly, but I don't want the appearance that is given by default.
I'll keep working at solving this in a way that isn't too complex. Thanks for your time. I appreciate the labour of love that saves me time. I'm just trying to look out for those crazy customizers out there while also empathizing with future maintainers of my own project.
Upon further consideration after writing this, I think I'm going to copy the .popper classes and remove everything that changes the appearance, and work with a bare-bones .popper
and .popper__arrow
classes. Then I can write an annotation that if anyone updates the library and the styles break, they need to analyze whatever is new in node_modules/vue-popperjs/dist/css/vue-popper.css
. But optimally, I would like to just load whatever comes with the library and add on top of it, but that is proving difficult.