Next.js CSS-Styling

In Next.js ist die Verwendung von Stilen sehr flexibel; wir können aus einer Vielzahl von Möglichkeiten wählen, um Stile zu Ihrer Anwendung hinzuzufügen.

Globale Stile

Globale Stile sind CSS-Stile, die die gesamte Anwendung betreffen. Sie werden normalerweise verwendet, um Basisstile für die Seite festzulegen, wie Schriftarten, Farben, Layout und so weiter.

Next.js importiert globale CSS-Dateien in app/layout.tsx.

Standardmäßig enthält das app-Verzeichnis bereits globale Stile.globals.cssWenn die Datei nicht existiert, können Sie auch eine neue CSS-Datei erstellen.

Erstellen Sie sie im styles-Verzeichnis alsglobals.css-Datei und importieren Sie sie dann in app/layout.tsx.

Code der Datei app/globals.css:

/* app/globals.css */
body {
padding: 20px 20px 60px;
max-width: 680px;
font-size:64px;
margin: 0 auto;
background-color: #F5F5FB;
color: #333;
}

Importieren Sie dann diese Datei im Root-Layout (app/layout.tsx), um die Stile auf jede Route in der Anwendung anzuwenden:

Code der Datei app/layout.tsx:

// app/layout.tsx
// Diese Stile gelten für jede Route in der Anwendung
import './globals.css'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>{children}</body>
</html>
)
}

Hinweise:Globale Stile können in jedes Layout, jede Seite oder jede Komponente im app-Verzeichnis importiert werden. Da Next.js jedoch die integrierte Stylesheet-Unterstützung von React verwendet, um mit Suspense zu integrieren, entfernt die aktuelle integrierte Unterstützung keine Stylesheets, wenn Sie zwischen Routen navigieren. Daher empfehlen wir, globale Stile für wirklich globales CSS und CSS Modules für bereichsbezogenes CSS zu verwenden.

app/page.tsx Code ist wie folgt:

Beispiel

export default function Home() {
return <div>Hello, Example!</div>;
}

Besuchen Sie http://localhost:3000/ und die Testausgabe ist wie folgt:

Sass

Next.js unterstützt auch Sass, einen funktionsreicheren CSS-Präprozessor.

Wenn Sie es vorziehen, Sass zum Schreiben von Styles zu verwenden, können Sie Sass aktivieren, indem Sie die entsprechenden Abhängigkeiten installieren. Weitere Informationen zu Sass finden Sie imSass-Tutorial。

Installation:

npm install sass

Next.js integriert sich in Sass und unterstützt die .scss- und .sass-Erweiterungen und die Syntax.

Sie können auch Komponenten-basiertes Sass mit CSS-Modulen verwenden, mit den Erweiterungen .module.scss oder .module.sass.

Anpassen der Sass-Konfiguration

Wenn Sie Sass-Optionen konfigurieren möchten, können Sie die Option sassOptions in next.config.js verwenden.

Beispiel

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
sassOptions: {
additionalData: `$var: red;`, // Diese Stile automatisch in jede Sass-Datei injizieren
},
}

export default nextConfig

Auf diese Weise kannst du einige Standard-Sass-Daten konfigurieren oder andere benutzerdefinierte Einstellungen vornehmen.

Erstelle eine SCSS-Datei wie styles/Button.module.scss:

Beispiel

/* styles/Button.module.scss */
.button {
padding: 10px 20px;
background-color: #0070f3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

SCSS-Module in Komponenten verwenden:

Beispiel

// app/components/Button.tsx
import styles from '../styles/Button.module.scss';

export default function Button() {
return <button className={styles.button}>Klick mich</button>;
}

Andere Erweiterungen