I'm using the drawer from Material UI and I'm trying to round the corners using CSS like so:

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

It works kinda, but the actual corners remain white instead of transparent.

How can I fix it such that the corners are properly rounded off? I've put my code in the following codesandbox:

I'm using the drawer from Material UI and I'm trying to round the corners using CSS like so:

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

It works kinda, but the actual corners remain white instead of transparent.

How can I fix it such that the corners are properly rounded off? I've put my code in the following codesandbox:

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

• javascript
• css
• reactjs
• typescript
• material-ui

1 Answer 1

Reason

Your SwipeableDrawer wraps your content inside a <Paper /> ponent. A Materiaul-UI paper ponent has shadows and a non-transparent background.

Solution

You do not use classnames, you use style, so the right way would be to set the SwipeableDrawer paperProps to:

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

• Elevation: 0, so that there are no shadows anymore
• backgroundColor: 'transparent', so that there is no background except yours

PS: Instead of having your borderRadius on your div, you may set it on the paper itself using the same prop

PaperProps={{ square: false }}

And remove your borderRadius from your div

Using classNames

If you used classNames (doc), you could have set the paper className to one of yours, using the classes prop:

classes={{ paper: classes.someClassName }}