问题
On a Next.js project, I'd like to get some initial HTML with this exact same content inside the <head>:
<link href="..." rel="stylesheet" media="print" onload="this.media='all'" />
What I have in my code, inside Next.js's <Head> component, is:
{ /* @ts-ignore */ }
<link href="..." rel="stylesheet" media="print" onload="this.media='all'" />
Without the @ts-ignore it says:
Property 'onload' does not exist on type 'DetailedHTMLProps<LinkHTMLAttributes, HTMLLinkElement>'. Did you mean 'onLoad'? ts(2322)
And if I use onLoad instead of onload I get:
Type 'string' is not assignable to type '(event: SyntheticEvent<HTMLLinkElement, Event>) => void'. ts(2322)
The problem is that the server-side generated HTML that I get has:
<link href="..." rel="stylesheet" media="print" />
And only once the page has rehydrated it updates to:
<link href="..." rel="stylesheet" media="all" onload="this.media='all'">
I've found this issue on GitHub but it doesn't help as I'm not using Google Fonts but Typography.com, so I can't use next-google-fonts: https://github.com/vercel/next.js/issues/12984
I'm thinking about adding a ref to that link tag and setting the attribute using setAttribute, which will hopefully work on the server-side as well, but wondering if there's a simpler way to do it.
来源：https://stackoverflow.com/questions/64121456/next-js-how-to-add-a-link-tag-inside-the-head-with-literal-onload-attribut