I'm currently working on a Vue3 application that utilizes the library https://github.com/ismail9k/vue3-carousel.
Within my App.vue file, I have included the necessary code to integrate the library:
<style>
@import "~vue3-carousel/dist/carousel.css";
</style>
However, I want to customize the default colors provided by the library.
The library sets certain colors using :root, such as:
--vc-clr-primary: #333333;
--vc-pgn-background-color: var(--vc-clr-primary);
Specifically, I am aiming to modify the following style:
.carousel__pagination-button {
...
background-color: var(--vc-pgn-background-color);
}
To achieve this, I attempted to override either the variables or the class itself in my Component.vue file with the following code:
<style scoped>
.carousel__pagination-button {
background-color: #999999 !important;
}
</style>
Unfortunately, this does not produce the desired effect.
I am open to overriding these colors anywhere since they will be consistent across the entire website. However, I am struggling to successfully apply the overrides regardless of where or how I implement them.
What could I be doing incorrectly?