0

I try to customize dots with React Slick and have this issue with the background color. Here is how I set the styles.

 .slick-dots.circle-dots {
    list-style-type: none;
    display: flex !important;
    justify-content: center;
    padding: 0;
    .slick-active {
      background-color: red;
      background-size: contain;
      border-radius: 50%;
    }
  }

An this is the result. The background is actually larger than the circle with border-radius: 50%. As there dots are placed next to each other, it's easy to point out that one is bigger than the others and it's weird. Is there any way that I can fix it?

enter image description here

leonheess
  • 16,068
  • 14
  • 77
  • 112
Ian Tran
  • 315
  • 3
  • 14

1 Answers1

0

Since .slick-active is a child of .slick-dots.circle-dots, setting 

 .slick-dots.circle-dots {
    list-style-type: none;
    display: flex !important;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    //hide anything that spans larger than the element 
    .slick-active {
      background-color: red;
      background-size: contain;
      border-radius: 50%;
    }
  }

to hide overflows could work

Miracleio
  • 15
  • 1
  • 1
  • 6
  • I have figured out the issue. For this, I use the `CustomPaging` to create these dots, thus, I have a component called `Dot` as my customized dot. The `.slick-active` is a div that wrap the component `Dot`, so if I set color for `.slick-active`, the background will always be bigger than the `Dot`. The solution is to target the child div `.slick-active { div { background: red; border-radius: 50%; background-size: contain; overflow: hidden; } }` Thanks a lot. Your answer is a hint for me to solve this problem. – Ian Tran Jan 05 '20 at 17:43
  • Glad to help :) – Miracleio Jan 05 '20 at 20:44