Material-UI 抽屉圆角留下空白

Question

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

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

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

我怎样才能修复它，使角正确倒圆？我已将代码放入以下代码和框中：

https://codesandbox.io/s/material-demo-q3n14

Answer 1

原因

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

解决方案

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

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

• 高程：0，这样就不再有阴影了
• backgroundColor: '透明'，这样除了你的背景之外就没有背景了

PS：您可以使用相同的道具将 borderRadius 设置在纸张本身上，而不是在 div 上设置 borderRadius

PaperProps={{ square: false }}

并从 div 中删除 borderRadius

使用类名

如果您使用了 classNames ( doc )，您可以使用以下 prop 将论文 className 设置为您的之一classes：

classes={{ paper: classes.someClassName }}