Styling-Tipps

Hier sind einige Styling-Tipps, die hilfreich sein könnten.

Sie können die folgenden Abschnitte einfach durchlesen. Es ist nicht notwendig, Änderungen an unserer App vorzunehmen!

Verwendung der clsx-Bibliothek zum Umschalten von Klassen

clsx ist eine einfache Bibliothek, mit der Sie Klassennamen einfach umschalten können. Sie können sie mit npm install clsx oder yarn add clsx installieren.

Bitte lesen Sie die Dokumentation für weitere Details, aber hier ist die grundlegende Verwendung:

• Angenommen, Sie möchten eine Alert-Komponente erstellen, die einen type akzeptiert, der entweder 'success' oder 'error' sein kann.
• Wenn es 'success' ist, soll die Textfarbe grün sein. Wenn es 'error' ist, soll die Textfarbe rot sein.

Sie können zunächst ein CSS-Modul (z.B. alert.module.css) wie folgt schreiben:

.success {
  color: green;
}
.error {
  color: red;
}

Und clsx wie folgt verwenden:

import styles from './alert.module.css';
import { clsx } from 'clsx';
 
export default function Alert({ children, type }) {
  return (
    <div
      className={clsx({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >
      {children}
    </div>
  );
}

Anpassen der PostCSS-Konfiguration

Ohne zusätzliche Konfiguration kompiliert Next.js CSS mit PostCSS.

Um die PostCSS-Konfiguration anzupassen, können Sie eine Top-Level-Datei namens postcss.config.js erstellen. Dies ist nützlich, wenn Sie Bibliotheken wie Tailwind CSS verwenden.

Hier sind die Schritte, um Tailwind CSS hinzuzufügen. Zuerst installieren Sie die Pakete:

npm install -D tailwindcss autoprefixer postcss

Dann erstellen Sie eine postcss.config.js:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Wir empfehlen auch, Inhaltsquellen zu konfigurieren, indem Sie die content-Option in tailwind.config.js angeben:

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // Für die beste Performance und um falsche Positivmeldungen zu vermeiden,
    // seien Sie so spezifisch wie möglich mit Ihrer Inhaltskonfiguration.
  ],
};

Um mehr über die benutzerdefinierte PostCSS-Konfiguration zu erfahren, lesen Sie die PostCSS-Dokumentation.

Um einfach mit Tailwind CSS zu beginnen, sehen Sie sich unser Beispiel an.

Verwendung von Sass

Next.js ermöglicht standardmäßig den Import von Sass mit den Erweiterungen .scss und .sass. Sie können komponentenbezogenes Sass über CSS-Module und die Erweiterungen .module.scss oder .module.sass verwenden.

Bevor Sie die integrierte Sass-Unterstützung von Next.js nutzen können, müssen Sie sass installieren:

npm install -D sass

Das war's für diese Lektion!

Um mehr über die integrierte CSS-Unterstützung und CSS-Module von Next.js zu erfahren, lesen Sie die CSS-Dokumentation.