Использование переменных env () css со стилевыми компонентами

Question

Поддерживаются ли env переменные в styleled-компонентах? Я пытался использовать вставные для стиля iPhone, но следующее не работает и не отступает от тех 40px

const Header = styled.header`
  padding-top: env(safe-area-inset-top, 40px);
`;

Normal padding-top: 40px; работает как ожидалось.

Я проверил это в браузере Chrome на рабочем столе и в Safari на iPhone X, результат не заполнен.

Answer 1

Стилизованные компоненты действительно поддерживают это, это должно быть что-то еще.

Возможно, ваша версия iOS не поддерживает env()?

Попробуйте использовать constant() как запасной вариант:

body {
  /* No variables */
  padding-top: 12px;

  /* iOS Safari 11.2, Safari 11 */
  padding-top: constant(safe-area-inset-top, 12px); 

  /* iOS Safari 11.4+, Safari 11.1+, Chrome 69+, Opera 56+ */
  padding-top: env(safe-area-inset-top, 12px); 
}