无法在 Next.js 中使用元内的媒体

Question

所以，我一直在阅读这篇关于 PWA 的文章，来自 web.dev and at some point 他们谈论配色方案，

我正在使用 Next.js 并且我试图实现这个：

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">

它给我一个错误：

Property 'media' does not exist on type 'DetailedHTMLProps<MetaHTMLAttributes<HTMLMetaElement

所以，有没有办法在 next.js 中实现上面的代码？

Answer 1

编辑： 由 DefinitelyTyped#54936 修复。将您的 @types/react 更新到最新的补丁版本。

meta 标签上的 media 属性已成为 HTML 标准的一部分 recently. And isn't even supported in latest stable release of any popular browser (Chrome, Safari, Firefox, Edge) (as of 4th Aug, 2021). It appears the type definitions for this are not yet present on @types/react。

现在，如果需要，您可以添加以下类型定义并将文件包含在 tsconfig.json.

中

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import type * as React from 'react';

declare module 'react' {
  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
  interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
    media?: string | undefined;
  }
}

无法在 Next.js 中使用元内的媒体

Cannot use media inside meta in Next.js

html

meta-tags

next.js