使用带有样式组件的env（）CSS变量

Question

样式组件中是否支持const addBook = ({ name, title }) => { console.log("the name of books is ", name); console.log("the title of books is ", title); }; const booksRepo = { addBook: addBook }; export default booksRepo; 变量？我试图利用内嵌样式围绕iPhone的缺口进行样式设置，但以下内容无效，也不会回到40px

env

正常const Header = styled.header` padding-top: env(safe-area-inset-top, 40px); `; 可以正常工作。

我在台式机的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); 
}