Javascript 材料UI抽屉圆角留下空白

我正在使用Material UI中的抽屉，我正在尝试使用CSS绕过各个角落，如下所示：

  style={{
    borderRadius: "25px",
    backgroundColor: "red",
    overflow: "hidden",
    padding: "300px"
  }}

它的工作原理是，但实际的角落仍然是白色而不是透明的

我怎样才能把它修好，使角正确地磨圆？我已将代码放在以下代码沙盒中：

原因 您的

SwipeableDrawer

将您的内容包装在

组件中。MaterialUi纸张组件具有阴影和不透明背景

解决方案 您不使用类名，而是使用样式，因此正确的方法是将SwipeableDrawer paperProps设置为：

PaperProps={{ elevation: 0, style: { backgroundColor: "transparent" } }}

• 标高：0，因此不再有阴影
• 背景颜色：“透明”，因此除了你的背景之外没有其他背景

PS：您可以使用相同的道具在纸上设置边界半径，而不是在div上设置边界半径

PaperProps={{ square: false }}

并从div中删除边界半径

使用类名 如果使用classNames（），则可以使用

classes

prop:

classes={{ paper: classes.someClassName }}

理由 您的

SwipeableDrawer

将您的内容包装在

组件中。MaterialUi纸张组件具有阴影和不透明背景

解决方案 您不使用类名，而是使用样式，因此正确的方法是将SwipeableDrawer paperProps设置为：

PaperProps={{ elevation: 0, style: { backgroundColor: "transparent" } }}

• 标高：0，因此不再有阴影
• 背景颜色：“透明”，因此除了你的背景之外没有其他背景

PS：您可以使用相同的道具在纸上设置边界半径，而不是在div上设置边界半径

PaperProps={{ square: false }}

并从div中删除边界半径

使用类名 如果使用classNames（），则可以使用

classes

prop:

classes={{ paper: classes.someClassName }}