【问题标题】：Material-UI Drawer rounding off corners leaves whitespaceMaterial-UI 抽屉四舍五入留下空白
【发布时间】：2020-06-28 13:32:52
【问题描述】：

我正在使用 Material UI 中的抽屉，我正在尝试使用 CSS 来圆角，如下所示：

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

它有点工作，但实际的角落保持白色而不是透明。

如何修复它以使角正确圆角？我已将代码放入以下代码框：

【问题讨论】：

【解决方案1】：

原因

您的SwipeableDrawer 将您的内容包装在<Paper /> 组件中。 Materiaul-UI 纸张组件具有阴影和非透明背景。

解决方案

你不使用类名，你使用样式，所以正确的方法是将 SwipeableDrawer paperProps 设置为：

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

PS：你可以使用相同的道具将它设置在纸上，而不是在你的 div 上设置你的borderRadius

PaperProps={{ square: false }}

并从您的 div 中删除您的borderRadius

如果您使用了 classNames (doc)，您可以使用 classes 属性将论文 className 设置为您的其中一个：

classes={{ paper: classes.someClassName }}

【讨论】：