数据结构
网络
关系数据库管理系统 (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+ 浏览量
