How to change point styles in vue-slick-carousel

Question

I am using the vue-slick-carousel package in Vue js app i want to change slider dots styles change color, background, width, height and so on how can i achieve this? here is my code

<VueSlickCarousel :arrows="false" :dots="true" :slidesToShow="3">
  <div class="medium_rectangle">1</div>

  <div class="medium_rectangle">2</div>

  <div class="medium_rectangle">3</div>

  <div class="medium_rectangle">4</div>
</VueSlickCarousel>

Answer 1

Here's what currently sets those values:

.slick-dots {
  background-color: transparent; /* bg color of container */
}
.slick-dots button:before {
  color: #000; /* color of dots */
  opacity: .25; /* opacity of dots */
  background-color: transparent; /* bg color of each "button" 
                                  * (blends with the one set in .slick-dots
                                  * if opacity is not 1) */
  content: "•"; /* this is the actual dot (yep, it's text)
                 * set it to ❥,  or whatever other string you want); 
             NOTE: don't set it to `none`: the dots won't display! */
  font-size: 10px; /* font-size of the dot */
}
.slick-dots .slick-active button:before {
  /* everything already listed under `.slick-dots button:before`
     except `opacity` is set to 1 by default */
}

Be weary the specificity of selectors currently setting those values is rather high. For example, in the case of the active dot opacity, it's 4 x classes + 2 x element (example: .slick-slider[data-v-aa003c28] .slick-dots .slick-active button:before).
I typically use an 1 x :not(#id) to override those (overrides without using !important).

Example SCSS (needs parsing!) which would apply:

.slick-dots:not(#_) {
  background-color: rgba(0,0,0,.21);
  button:before {
    color: cyan;
    opacity: 1;
  }
  slick-active button:before {
    color: fuchsia;
  }

/* rounded dark container around dots */

  display: flex !important; /* override inline style ! */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1rem;
  width: auto; 
  margin: 0 auto;
  padding: .25rem;
}

Ends up like this:

Note: I'm not telling you how to fight your own CSS specificity wars, I'm only showing you how I typically fight mines. Others use !important, others like to match the exact current specificity for each rule they override.
You do your own thing.