Styling with CSS env() Variable?

user_364966 0
Viewed 216

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:

enter image description here

I found out via a post on StackExchange, that I need to use the CSS env() variable.

I'm trying to find the correct syntax for this. So far I've tried:

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
        `}
>

...and I got this error in the console:

Uncaught ReferenceError: env is not defined

I also tried it like this:

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
        `}
>

There's no error generated by this, but height evaluates to just 50, even on a new iPad.

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.

What's the correct way to access the CSS env() variable for use with with React and/or Material-UI?

css-variables emotion material-ui reactjs css
2 Answers

It should work - I can only make some educated guesses, why it doesn't:

In the documentation of the env variable, it says you have to add a meta tag to your HTML document. This would most likely need to be added to index.html in the public folder of your app:

<meta name="viewport" content="viewport-fit=cover" />

Furthermore, I am not familiar with the emotion library you use - but if the CSS string you provide to style your BottomNavigation component is standard CSS, is should look more like this:

<BottomNavigation
    onChange={handleChange}
    showLabels
    css={css`
        position: fixed;
        left: 0px;
        bottom: 0px;
        height: calc(50px + env(safe-area-inset-bottom)px);
        width: 100%;
        zIndex: 100;
        `}
>

I hope it helps

user_75454960

The first thing you should do is to test such things with just HTML and CSS and get it working there. Another thing to do is to check in the dev tools of your browser if it complaints about the CSS are invalid.

The value returned from env(safe-area-inset-bottom) already has a unit, so it has to be env(safe-area-inset-bottom) and not env(safe-area-inset-bottom)px adding px makes the css property value invalid.

50 + env(safe-area-inset-bottom) would also not work as 50 does not have a unit. It e.g. would need to be 50px + env(safe-area-inset-bottom).

And finally to make it a valid CSS value you need to have calc because env(safe-area-inset-bottom) is retrieved at runtime by the browser.

So it has to look that way calc( 50px + env(safe-area-inset-bottom) )

user_19604550
Related