填充在Sass使材质UI图标消失

Question

我正在React中创建一个图像滑块。我使用Material UI箭头图标作为左右按钮。

一切都很好，直到我尝试添加填充。

在添加填充之前，我可以看到两个白色圆圈和我的箭头。一旦我添加了填充，白色的圆圈变得更大，但里面的箭头消失了。

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">
<KeyboardArrowLeftOutlinedIcon className="arrow" onClick={prevSlide} />
<KeyboardArrowRightOutlinedIcon className="arrow" onClick={nextSlide} />
</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 {
cursor: pointer;
background-color: white;
border-radius: 2em;
padding: 1em;
}
}
}

Answer 1

似乎一个可能的解决方案是用div包装箭头图标，并样式包装。

stackblitz的最小化演示(没有功能，使用纯CSS)

的例子:

<div className="arrows">
<div className="arrow">
<KeyboardArrowLeftOutlinedIcon />
</div>
<div className="arrow">
<KeyboardArrowRightOutlinedIcon />
</div>
</div>

还需要在Sass中进行一些更改来匹配它，例如:

.arrows {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: center;

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