Operating on React with Material-UI, my web app features a bottom nav bar. For certain devices like the latest iPad, I must allocate an additional 8 pixels below it to account for the horizontal gray bar that substitutes for a home button:
https://i.sstatic.net/P6fiE.png
A valuable insight from a discussion on StackExchange pointed me towards utilizing the CSS env() variable.
In search of the accurate syntax for this adjustment, I've attempted the following so far:
import {css} from '@emotion/react'
[.....]
<BottomNavigation
onChange={handleChange}
showLabels
css={css`
position: fixed,
left: 0px,
bottom: 0px,
height: ${50 + env(safe-area-inset-bottom)}px,
width: 100%,
zIndex: 100
`}
>
...resulting in the console error:
Uncaught ReferenceError: env is not defined
Another attempt was made as follows:
import {css} from '@emotion/react'
[.....]
<BottomNavigation
onChange={handleChange}
showLabels
css={css`
position: fixed,
left: 0px,
bottom: 0px,
height: 50 + env(safe-area-inset-bottom)px,
width: 100%,
zIndex: 100
`}
>
No errors were triggered by this method, but the height value stuck at just 50, even when tested on a new iPad.
Although several older posts on SO touch upon this issue, the remedies suggested seem outdated and ineffective in this context.
The question looms: What's the proper approach to tap into the CSS env() variable compatible with React and/or Material-UI?