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

Question

样式组件中是否支持env变量？我试图利用插入式来围绕iPhone的凹口进行设计，但以下内容不起作用，也不会回到40像素的

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

正常CCD_ 2按预期工作。

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

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