React中创建居中盒子时BorderRadius角落背景颜色异常问题求助

看起来问题出在你用的MUI Paper 组件上！你的 Box 已经设置了圆角，但 Paper 作为它的父容器，本身带有默认的白色背景，而且既没设置圆角，也没开启 overflow: hidden。当 Box 把自己的角落切圆后，Paper 的白色背景就从这些圆角的缝隙里透出来了，这就是你看到的颜色不一致的原因。

下面给你几个可行的解决方案：

方案一：给Paper添加圆角和溢出隐藏 #

让 Paper 和 Box 的圆角保持一致，同时开启 overflow: hidden，这样就能阻止 Paper 的背景从圆角露出来。你可以用MUI的sx属性快速添加样式：

<Paper elevation={10} sx={{ borderRadius: 30, overflow: 'hidden' }}>
  <div className="Box">
    <div className="Items">
      <h1> Results </h1>
    </div>
  </div>
</Paper>

如果你更习惯用CSS，可以给Paper加个类名：

.paper-wrapper {
  border-radius: 30px;
  overflow: hidden;
}

然后在组件里引用这个类：

<Paper elevation={10} className="paper-wrapper">
  {/* 你的Box内容 */}
</Paper>

方案二：将Paper的背景设为透明 #

如果你不想修改Paper的圆角，可以直接把它的背景设为透明，这样就不会看到背景透出来了：

<Paper elevation={10} sx={{ backgroundColor: 'transparent' }}>
  <div className="Box">
    {/* 你的Box内容 */}
  </div>
</Paper>

不过这种方式下，Paper的阴影是方形的，和Box的圆角视觉上不太协调，所以更推荐方案一。

方案三：整合样式到Paper上（更简洁） #

其实你可以去掉额外的Box div，直接把Box的样式加到Paper组件上，这样结构更简洁，还能保证阴影和圆角完美匹配：

<Paper 
  elevation={10} 
  sx={{
    height: 400,
    width: 500,
    backgroundColor: 'black',
    color: 'white',
    borderRadius: 30,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}
>
  <div className="Items">
    <h1> Results </h1>
  </div>
</Paper>

这样就不需要单独写Box的CSS了，代码更清爽。

你可以根据自己的需求选择其中一种方案，应该都能解决你遇到的问题~

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