javascript - Los bordes redondeados del Drawer de Material-UI dejan espacio en blanco

Estoy usando el cajón de Material UI y estoy tratando de redondear las esquinas usando CSS así:

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

Funciona más o menos, pero las esquinas reales siguen siendo blancas en lugar de transparentes.

¿Cómo puedo arreglarlo para que las esquinas estén correctamente redondeadas? He puesto mi código en el siguiente codesandbox:

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

Respuesta #1

Razón

Tu SwipeableDrawer envuelve tu contenido dentro de un componente <Paper />. Un componente Paper de Material-UI tiene sombras y un fondo no transparente.

Solución

No usas classnames, usas style, así que la manera correcta sería establecer los paperProps de SwipeableDrawer en:

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

• Elevación: 0, para que ya no haya sombras
• backgroundColor: 'transparente', para que no haya fondo excepto el tuyo

PD: En lugar de tener tu borderRadius en tu div, puedes configurarlo en el propio papel usando la misma propiedad

PaperProps={{ square: false }}

Y elimina tu borderRadius de tu div

Usando classNames

Si utilizaste classNames (doc), podrías haber asignado la clase paper a una de las tuyas, usando la propiedad classes:

classes={{ paper: classes.someClassName }}