如何在 React 中使用 Tailwind 将状态栏背景设置为白色？

Question

我正在开发一个网站，使用reactjs和tailwindcss构建，现在我试图让它在我的iPhone（Safari）上看起来不错。但我似乎无法将状态栏/背景设为白色。

我尝试使用反应头盔添加元标签，但这没有任何作用：

<Helmet>
        <meta name="theme-color" content="#ffffff" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="viewport" content="width=device-width, viewport-fit=cover">`
</Helmet>

我已经尝试过这个：

body {
  background-color: white;
  height: 100vh;
  margin: 0;
  padding: env(safe-area-inset-top) 0 0 0;
}

但是也没有任何办法让状态栏变白...我似乎找不到任何其他方法，但是很多网站在我的iPhone上都有白色状态栏。

Answer 1

我也遇到了同样的问题，但我没有使用React Helmet，也没有编写css来解决它。

在 index.html 文件的部分中，使用与代码中相同的属性，应该没问题。

Answer 2

试试这个，它的工作

{/*Android 的深色主题颜色 */} {/*iOS 状态栏*/}