Next.js - CSS-Unterstützung
In Next.js können wir die eingebaute css-in-js-Bibliothek mit dem Namen styled-jsx verwenden. Es ermöglicht das Schreiben von CSS innerhalb einer Reaktionskomponente, und diese Stile gelten für die Komponente.
In diesem Beispiel erstellen wir ein Container-Objekt, mit dem andere Komponenten formatiert werden, indem sie enthalten werden.
Lassen Sie uns Update die nextjs Projekt in verwendete Meta Data Kapitel.
Erstellen Sie zunächst ein Komponentenverzeichnis auf Stammebene und fügen Sie eine Datei container.module.css wie folgt hinzu:
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
border: 1px solid red;
}
Erstellen Sie die Datei container.js im Komponentenverzeichnis
import styles from './container.module.css'
function Container({ children }) {
return <div className={styles.container}>{children}</div>
}
export default Container
Verwenden Sie nun die Containerkomponente in first.js.
import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'
export default function FirstPost() {
return (
<>
<Container>
<Head>
<title>My First Post</title>
</Head>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
</Container>
</>
)
}
Starten Sie Next.js Server
Führen Sie den folgenden Befehl aus, um den Server zu starten.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
Überprüfen Sie die Ausgabe
Öffnen Sie localhost: 3000 in einem Browser und gehen Sie zum ersten Beitrag. Sie sehen die folgende Ausgabe.