html - BorderRadius 显示不同的背景颜色

Question

我正在尝试使用 div 的反应在中心创建一个框。边界半径正在工作，但角落的颜色与背景不同。我试过使用溢出：隐藏但它没有做任何事情。

代码：

import React from 'react';
import { Paper, Box } from "@mui/material"

import '../styling/Results.css';

function Results() {
  

  return (
    <div className="container">
      
      <div className='wrapper'>
        <Paper elevation={10}>

          <div className="Box">

            <div className="Items">
              <h1> Results </h1>
            </div>
          
          </div>

        </Paper>
      </div>

    </div>
  );
}

export default Results;

CSS：

.wrapper{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: beige;

}

.Box {
    height: 400px;
    width: 500px;
    background: black;
    color: white;
    display: flex;
    border-radius: 30px;
    overflow: hidden;
}

这是它的样子： 截图

Answer 1

  return (
    <div className="container">
      <div className="wrapper">
        <Paper
          style={{ boxShadow: "none", background: "transparent" }}
          elevation={10}
        >
          <div className="Box">
            <div className="Items">
              <h1> Results </h1>
            </div>
          </div>
        </Paper>
      </div>
    </div>
  );

Answer 2

我知道了。问题出在纸边框半径上。为了解决这个问题，我只是改变了 Paper 的边界半径以匹配我的 div，如下所示：

<Paper sx={{borderRadius:"30px"}} elevation={10}></Paper>