fix Snackbar position on notched iphone

This commit is contained in:
Sidney Alcantara
2021-09-21 21:39:21 +10:00
parent ae0c964a24
commit a0cdd698dd
2 changed files with 34 additions and 1 deletions

View File

@@ -12,6 +12,39 @@ import WarningIcon from "@mui/icons-material/WarningAmber";
const useStyles = makeStyles((theme) =>
createStyles({
containerRoot: {
"&&": {
[theme.breakpoints.down("sm")]: {
maxWidth: `calc(100% - ${theme.spacing(2)})`,
},
},
"&.SnackbarContainer-top": {
top: `max(env(safe-area-inset-top), ${theme.spacing(3)})`,
[theme.breakpoints.down("sm")]: {
top: `max(env(safe-area-inset-top), ${theme.spacing(1)})`,
},
},
"&.SnackbarContainer-bottom": {
bottom: `max(env(safe-area-inset-bottom), ${theme.spacing(3)})`,
[theme.breakpoints.down("sm")]: {
bottom: `max(env(safe-area-inset-bottom), ${theme.spacing(1)})`,
},
},
"&.SnackbarContainer-right": {
right: `max(env(safe-area-inset-right), ${theme.spacing(3)})`,
[theme.breakpoints.down("sm")]: {
right: `max(env(safe-area-inset-right), ${theme.spacing(1)})`,
},
},
"&.SnackbarContainer-left": {
left: `max(env(safe-area-inset-left), ${theme.spacing(3)})`,
[theme.breakpoints.down("sm")]: {
left: `max(env(safe-area-inset-left), ${theme.spacing(1)})`,
},
},
},
root: {
"& .SnackbarItem-contentRoot": {
borderRadius: (theme.shape.borderRadius as number) * 1.5,

View File

@@ -70,7 +70,7 @@ export default function TestView() {
return (
<Navigation title="Theme Test">
<Container style={{ margin: "24px 0 200px" }}>
<Container style={{ margin: "24px 0 200px", overflowX: "auto" }}>
<Stack spacing={8}>
<Table stickyHeader>
<TableHead>