如何使用 NextJS 動態添加樣式表？
[英]How can I add a stylesheet dynamically with NextJS?
問題描述
在我的 nextJS 應用程序中，我需要根據從數據庫接收到的用戶偏好動態加載樣式表。
因此，在我的頁面中，我將其添加到 Head (next/head) 中，如下所示：
<Head>
<link rel="stylesheet" href={`/fonts/${type}/stylesheet.css`}></link>
</Head>
但是，這在開發模式的控制台中給我一個警告：
Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="/fonts/cal/stylesheet.css"). Use Document instead.
See more info here: https://nextjs.org/docs/messages/no-stylesheets-in-head-component
樣式表本身包含字體：
@font-face {
font-family: "Cal Sans";
src: url("CalSans-SemiBold.woff2") format("woff2"),
url("CalSans-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
由於用戶的首選項存儲在數據庫中，並且我通過查詢收到此值，所以我不知道如何將它添加到 Document.js 文件中。
我真的很感激這方面的任何幫助。
3 個解決方案
解決方案1
0 2022-04-18 12:52:19
雖然可以在您的主要應用程序組件中動態導入 CSS 文件（您可以查看本指南中的示例），但我建議采用不同的解決方案。
在您的應用程序中包含所有樣式表，但使其 styles 僅在html （或body ）元素具有特定 class 時適用。然后您需要做的就是根據用戶偏好修改該 class。
// styles.css
body.themeFoo #container {
// some styles...
}
這是暗模式的許多實現，例如在 tailwind CSS 中。我相信這是解決您的問題的更好模式。
解決方案2
0 2022-04-18 13:25:49
next.js 使用 React，所以也許可以嘗試使用useState 鈎子，或者您可以更改 herf 屬性
解決方案3
0 2023-01-29 09:23:24
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link rel="stylesheet" href="..." />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
如何在不使用rel =“ stylesheet”的情況下添加boostrap下拉列表
[英]how can I add boostrap dropdown without using rel=“stylesheet”
如何使用JavaScript / jQuery有條件地添加樣式表？
[英]How can I use JavaScript/jQuery to conditionally add a stylesheet?
如何在不閃爍/重新加載網站的情況下在 React 中動態注入樣式表？
[英]How can I dynamically inject a stylesheet in React without the website flickering/reloading?
如何使用jQuery將樣式表和javascript文件動態添加到div元素
[英]how to dynamically add stylesheet and javascript files to a div element using jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.