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 badges1 Answer
Reset to default 9Reason
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 }}