資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 Next.js 中新增樣式表？
我們可以在 Next.js 中新增樣式表，方法是在 "pages" 目錄中建立一個 CSS 檔案，然後在所需的元件中匯入它。我們也可以使用像 styled-jsx 這樣的 CSS-in-JS 庫在 Next.js 中進行樣式設定。需要注意的是，樣式將只作用於匯入它們的元件，不會影響全域性樣式。
讓我們首先了解什麼是 Next.js。Next.js 是一個開源的 Web 開發框架。Next.js 是基於 React 的框架，具有伺服器端渲染功能。速度和 SEO 都非常出色。您可以使用 Next.js 輕鬆構建和測試複雜的基於 React 的應用程式。
Next.js 使用 Typescript 編寫。它提供了一個 Link 元件，用於將其他元件連結在一起，並具有一個 prefetch 屬性，允許後臺預取頁面資源。它支援動態匯入 React 元件和 JavaScript 模組。此外，它還允許您匯出 Web 應用程式的整個靜態站點。
Next.js 允許您從 JavaScript 檔案匯入 CSS 檔案。這是可能的，因為 Next.js 將 import 的概念擴充套件到了 JavaScript 以外。
要開始使用，首先建立一個新的 NextJS 應用程式，並在我們的開發伺服器上執行它，如下所示：
npx create-next-app my-app cd my-app npm start
方法
在 Next.js 專案的根目錄下建立一個名為 "styles" 的新資料夾。
在 styles 資料夾內，建立一個名為 "global.css" 的新檔案。此檔案將包含應用於網站所有頁面的全域性樣式。
在您的 "pages" 資料夾中，建立一個名為 "_app.js" 的新檔案。此檔案將用於包裝應用程式中的所有頁面，您將在其中匯入全域性樣式。
在 _app.js 檔案中，使用以下程式碼匯入 global.css 檔案：
import "../styles/global.css";
在 _app.js 檔案中，將 <Component {...pageProps} /> 包裹在 <Head> 元件中以包含樣式表：
<Head> <link rel="stylesheet" href="/styles/global.css" /> </Head>
在 _app.js 檔案中，將 <Component {...pageProps} /> 包裹在 <Head> 元件中以包含樣式表：
<Head> <link rel="stylesheet" href="/styles/global.css" /> </Head>
儲存對 _app.js 檔案的更改，您的全域性樣式現在將應用於網站上的所有頁面。
注意：如果您想為特定頁面新增樣式表，可以在該特定頁面的 JS 檔案中匯入它，然後將匯入的樣式表包裹在 <style> 標籤中。
示例
global.css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
_app.js
import Head from "next/head";
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<link rel="stylesheet" href="/styles/global.css" />
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
10K+ 瀏覽量
