使用env() CSS变量与styled-components

Question

styled-components支持环境变量吗？我想利用插入式的环境变量来围绕iPhone的刘海进行样式设置，但下面的代码不起作用，也没有回退到那40px。

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

普通的padding-top: 40px;效果如预期。

我在桌面上的Chrome浏览器和我的iPhone X上测试了这个问题，结果是完全没有填充。

- Ilja

Answer 1

Styled Components是支持的，这一定是其他问题。

也许你的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); 
}

- Raicuparta