title: Styling with CSS env() Variable?
body: <p>My web app uses React with Material-UI. It has a bottom nav bar. On some devices, e.g. a current iPad, I need to leave around 8 extra pixels under it for the horizontal gray bar that the iPad has in place of a home button:</p>
  <p><a href="https://i.stack.imgur.com/P6fiE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P6fiE.png" alt="enter image description here" /></a></p>
  <p>I found out via a <a href="https://softwareengineering.stackexchange.com/questions/439301/best-practices-for-designing-around-presence-absence-of-home-button-on-tablets/439306#439306">post</a> on StackExchange, that I need to use the CSS env() variable.</p>
  <p>I'm trying to find the correct syntax for this. So far I've tried:</p>
  <pre><code>import {css} from '@emotion/react'
  [.....]
  
  &lt;BottomNavigation
      onChange={handleChange}
      showLabels
      css={css`
          position: fixed,
          left: 0px,
          bottom: 0px,
          height: ${50 + env(safe-area-inset-bottom)}px,
          width: 100%,
          zIndex: 100
          `}
  &gt;
  </code></pre>
  <p>...and I got this error in the console:</p>
  <blockquote>
  <p>Uncaught ReferenceError: env is not defined</p>
  </blockquote>
  <p>I also tried it like this:</p>
  <pre><code>import {css} from '@emotion/react'
  [.....]
  
  &lt;BottomNavigation
      onChange={handleChange}
      showLabels
      css={css`
          position: fixed,
          left: 0px,
          bottom: 0px,
          height: 50 + env(safe-area-inset-bottom)px,
          width: 100%,
          zIndex: 100
          `}
  &gt;
  </code></pre>
  <p>There's no error generated by this, but height evaluates to just 50, even on a new iPad.</p>
  <p>There are a few other posts asking about this on SO, but they seem to be several years old, and the solutions proposed don't seem to apply and/or work in this case.</p>
  <p>What's the correct way to access the CSS <code>env()</code> variable for use with with React and/or Material-UI?</p>