背景大于Circle Div CSS的问题

我试着用React Slick定制圆点，背景色有这个问题。 下面是我如何设置样式的

 .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%;
    }
  }

这就是结果。背景实际上比边界半径为50%的圆大。由于这些点彼此相邻，很容易指出其中一个比其他点大，而且很奇怪。我有什么办法可以修吗

---

因为

.slick active

是

.slick dots.circle dots

的子项，设置

 .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%;
    }
  }

---

隐藏溢出可能会起作用

我已经解决了这个问题。为此，我使用

CustomPaging

创建这些点，因此，我有一个名为

Dot

的组件作为我的自定义点。

.slick active

是一个div，用于包装组件

点

，因此如果我为

.slick active

设置颜色，背景将始终大于

点

。解决方案是以子div

为目标。slick active{div{background:red；border radius:50%；background size:contain；overflow:hidden；}}

非常感谢。你的回答是我解决这个问题的一个提示。很乐意帮助：）