Sass添加Padding后Material UI箭头图标消失的问题求助

问题出在你直接给Material UI的KeyboardArrowLeftOutlinedIcon/KeyboardArrowRightOutlinedIcon组件加了padding和背景样式。这类Icon组件本质是渲染成SVG元素，直接给SVG加padding会导致内部箭头图形被挤压或溢出容器，最终看不见箭头。

解决方法很简单：把图标包裹在一个容器元素里，把背景、padding、圆角这些样式应用到容器上，而不是直接给Icon组件。

修改后的JSX代码： #

return (
  <div className="container">
    <div
      className="slider"
      style={{ transform: `translateX(-${currentSlide * 100}vw)` }}
    >
      <img src={images[0]} alt="" />
      <img src={images[1]} alt="" />
      <img src={images[2]} alt="" />
      <img src={images[3]} alt="" />
    </div>
    <div className="arrows">
      <div className="arrow-btn" onClick={prevSlide}>
        <KeyboardArrowLeftOutlinedIcon className="arrow-icon" />
      </div>
      <div className="arrow-btn" onClick={nextSlide}>
        <KeyboardArrowRightOutlinedIcon className="arrow-icon" />
      </div>
    </div>
  </div>
)

修改后的Sass代码： #

.container {
  width: 100vw;
  height: 60vh;
  overflow: hidden;
  position: relative;

  .slider {
    width: 400vw;
    height: 100%;
    display: flex;
    transition: all 1s ease;

    img {
      width: 100vw;
      height: 100%;
      object-fit: cover;
    }
  }

  .arrows {
    position: absolute;
    height: 100%;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80%;
    top: 0;

    .arrow-btn {
      cursor: pointer;
      background-color: white;
      border-radius: 2em;
      padding: 1em;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .arrow-icon {
      color: #000; // 确保箭头颜色可见，可按需调整
      font-size: 1.5rem; // 调整箭头大小
    }
  }
}

为什么这样有效？ #

• 容器arrow-btn负责处理点击、背景和内边距，SVG图标只专注于显示箭头
• 给容器添加flex居中属性，确保箭头在白色背景里居中显示
• 单独控制图标的颜色和尺寸，避免样式冲突

内容的提问来源于stack exchange，提问作者newportkat