时间戳

首页 > 解决方案 > 使用带有样式组件的 env() css 变量

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

问题描述

env样式组件是否支持变量？我试图利用插图来围绕 iPhone 的刘海设计样式，但以下不起作用，也不会回落到那些 40px

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

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

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

标签： cssreactjsstyled-components

解决方案

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

推荐阅读