最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Material-UI Drawer rounding off corners leaves whitespace - Stack Overflow

programmeradmin8浏览0评论

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

Share Improve this question asked Mar 17, 2020 at 12:56 SJ19SJ19 2,12310 gold badges39 silver badges80 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

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 }}
发布评论

评论列表(0)

  1. 暂无评论