背景大于 Circle Div CSS 的问题答案

【问题标题】：Issues with Background Larger than Circle Div CSS背景大于 Circle Div CSS 的问题
【发布时间】：2020-01-05 17:11:25
【问题描述】：

我尝试使用 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%;
    }
  }

这就是结果。背景实际上比border-radius: 50% 的圆圈大。由于点彼此相邻，因此很容易指出一个比其他点大，这很奇怪。有什么办法可以解决吗？

【问题讨论】：

标签： css reactjs react-slick

【解决方案1】：

由于.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 是一个包裹组件Dot 的div，所以如果我为.slick-active 设置颜色，背景总是会比Dot 大。解决方案是针对子 div .slick-active { div { background: red; border-radius: 50%; background-size: contain; overflow: hidden; } } 非常感谢。你的回答是我解决这个问题的一个提示。
很高兴为您提供帮助:)