使用带有样式组件的 env() css 变量

Question

样式组件是否支持 env 变量？我试图利用插图来围绕 iPhone 的缺口设置样式，但以下内容不起作用，也不会退回到那些 40px

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

正常 padding-top: 40px; 按预期工作。

我在桌面上的 chrome 浏览器和 iPhone X 上的 safari 中测试了这个，结果根本没有填充。

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); 
}

使用带有样式组件的 env() css 变量

Using env() css variables with styled-components

css

reactjs

styled-components