Styling in Next.js mit Styled JSX

Styled JSX ist eine CSS-in-JS-Bibliothek, die es ermöglicht, gekapselte und begrenzte CSS-Stile für Komponenten zu schreiben. Die Stile, die für eine Komponente definiert werden, beeinflussen andere Komponenten nicht, sodass Stile ohne unerwünschte Nebeneffekte hinzugefügt, geändert oder gelöscht werden können.

Erste Schritte

Next.js beinhaltet Styled JSX standardmäßig, daher ist der Einstieg so einfach wie das Hinzufügen eines <style jsx>-Tags in ein bestehendes React-Element und das Schreiben von CSS darin:

pages/index.js

function Home() {
  return (
    <div className="container">
      <h1>Hello Next.js</h1>
      <p>Let's explore different ways to style Next.js apps</p>
      <style jsx>{`
        .container {
          margin: 50px;
        }
        p {
          color: blue;
        }
      `}</style>
    </div>
  );
}
 
export default Home;

In diesem Beispiel fügen wir Stile für das Container-Element der Komponente und einen Absatz hinzu. Obwohl wir generische Selektoren verwenden, beeinflussen die Stile keine Elemente mit dem Klassennamen container oder <p>-Tags in anderen Komponenten. Dies liegt daran, dass Styled JSX sicherstellt, dass die Stile nur auf diese Komponente beschränkt sind (durch das Hinzufügen zusätzlicher eindeutiger Klassennamen zu gestylten Elementen).

Durch das Hinzufügen eines einzigen jsx-Attributs zu einem <style>-Element können Sie standardmäßiges CSS schreiben, das automatisch geprefixt und auf die Komponente beschränkt wird. <style jsx>-Elemente sollten innerhalb des Wurzelelements der Komponente platziert werden.

Globale Stile hinzufügen

Die meisten Projekte benötigen einige globale Stile, um das Body-Element zu gestalten oder CSS-Resets bereitzustellen. Styled JSX ermöglicht das Hinzufügen globaler Stile mit <style jsx global>. Zum Beispiel:

pages/index.js

function Home() {
  return (
    <div className="container">
      <h1>Hello Next.js</h1>
      <p>Let's explore different ways to style Next.js apps</p>
      <style jsx>{`
        .container {
          margin: 50px;
        }
        p {
          color: blue;
        }
      `}</style>
      <style jsx global>{`
        p {
          font-size: 20px;
        }
      `}</style>
    </div>
  );
}
 
export default Home;

Dies wendet eine Schriftgröße von 20px auf alle <p>-Tags in dieser spezifischen Seite an.

Um globale Stile auf alle Seiten unserer Anwendung anzuwenden, ist es ratsam, zunächst eine Layout-Komponente mit den globalen Stilen zu erstellen und dann alle Seiten damit zu umschließen.

Die Verwendung einer Layout-Komponente bietet die Flexibilität, bestimmte Stile auf einige Seiten anzuwenden, während andere Seiten einen anderen Stil haben können:

components/Layout.js

function Layout(props) {
  return (
    <div className="page-layout">
      {props.children}
      <style jsx global>{`
        body {
          margin: 0;
          padding: 0;
          font-size: 18px;
          font-weight: 400;
          line-height: 1.8;
          color: #333;
          font-family: sans-serif;
        }
        h1 {
          font-weight: 700;
        }
        p {
          margin-bottom: 10px;
        }
      `}</style>
    </div>
  );
}
 
export default Layout;

In Next.js können wir das Layout einmal für alle Seiten laden, indem wir eine benutzerdefinierte App-Komponente in pages/_app.js erstellen, die Layout-Komponente importieren und sie wie folgt zur Render-Methode hinzufügen:

pages/_app.js

import React from 'react';
import App, { Container } from 'next/app';
import Layout from '../components/Layout';
 
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
 
    return (
      <Container>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </Container>
    );
  }
}
 
export default MyApp;

Stile in externen Dateien schreiben

Wir können Stile auch in externen Dateien außerhalb der Komponente schreiben.

Zum Beispiel können wir unsere globalen Stile aus der Layout-Komponente in eine separate Datei verschieben:

styles/global.js

import css from 'styled-jsx/css';
 
export default css.global`
  body {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
    color: #333;
    font-family: sans-serif;
  }
  h1 {
    font-weight: 700;
  }
  p {
    margin-bottom: 10px;
  }
`;

Wir können dann die Stile wieder in die Layout-Komponente importieren:

components/Layout.js

import globalStyles from '../styles/global.js';
 
function Layout(props) {
  return (
    <div className="page-layout">
      {props.children}
      <style jsx global>
        {globalStyles}
      </style>
    </div>
  );
}
 
export default Layout;

Einmalige globale Selektoren

Die Stile, die wir mit <style jsx> zu einer Komponente hinzufügen, betreffen nur die Elemente innerhalb dieser Komponente, nicht jedoch Kindkomponenten.

Manchmal müssen wir einen bestimmten Stil einer Kindkomponente überschreiben. Dafür bietet Styled JSX :global(), was den Zugriff auf einmalige globale Selektoren ermöglicht.

Angenommen, wir haben eine <Widget>-Komponente, die einen Button mit dem Klassennamen btn enthält. Wenn wir die Farben dieses Buttons nur ändern möchten, wenn das Widget auf der Startseite importiert wird, können wir dies wie folgt tun:

pages/index.js

import Widget from '../components/Widget';
 
function Home() {
  return (
    <div className="container">
      <h1>Hello Next.js</h1>
      <Widget />
      <style jsx>{`
        .container {
          margin: 50px;
        }
        .container :global(.btn) {
          background: #000;
          color: #fff;
        }
      `}</style>
    </div>
  );
}
 
export default Home;

Dynamische Stile

Im Vergleich zu anderen Lösungen ist die Möglichkeit, das Styling einer Komponente basierend auf ihren Props anzupassen, ein großer Vorteil von CSS-in-JS-Bibliotheken.

Mit Styled JSX können wir dies wie folgt tun:

components/Alert.js

function Alert(props) {
  return (
    <div className="alert">
      {props.children}
      <style jsx>{`
        .alert {
          display: inline-block;
          padding: 20px;
          border-radius: 8px;
        }
      `}</style>
      <style jsx>{`
        .alert {
          background: ${props.type == 'warning' ? '#fff3cd' : '#eee'};
        }
      `}</style>
    </div>
  );
}
 
export default Alert;

Wenn der Alert-Komponente ein type-Prop mit dem Wert warning übergeben wird wie:

<Alert type="warning">This is an important message</Alert>

wird die Komponente einen orangefarbenen Hintergrund haben. Ohne Angabe des type-Props fällt der Hintergrund auf die standardmäßige graue Farbe zurück.

Beachten Sie, dass wir den dynamischen Stil in ein separates <style jsx>-Tag platziert haben. Dies ist nicht erforderlich, wird jedoch empfohlen, um statische und dynamische Stile zu trennen, sodass nur die dynamischen Teile neu berechnet werden, wenn sich die Props ändern.

Ein alternativer Ansatz, um Stile basierend auf Props anzupassen, ist das Anwenden verschiedener Klassennamen basierend auf dem Prop-Wert, wie unten gezeigt:

components/Alert.js

function Alert(props) {
  return (
    <div className={props.type == 'warning' ? 'alert warning' : 'alert'}>
      {props.children}
      <style jsx>{`
        .alert {
          display: inline-block;
          padding: 20px;
          border-radius: 8px;
          background: #eee;
        }
        .alert.warning {
          background: #fff3cd;
        }
      `}</style>
    </div>
  );
}
 
export default Alert;

Ein Site-Theme erstellen

Ein Theme kann ein einfaches Objekt sein, in dem wir die häufigsten Variablen, die wir in unserer App benötigen, enthalten:

styles/theme.js

const theme = {
  fontFamily: {
    sansSerif: '-apple-system, "Helvetica Neue", Arial, sans-serif',
    mono: 'Menlo, Monaco, monospace',
  },
  colors: {
    text: '#333',
    background: '#fff',
    link: '#1eaaf1',
    linkHover: '#0d8ecf',
    border: '#ddd',
    warning: '#fff3cd',
    success: '#d4edda',
  },
};
 
export default theme;

Wir importieren dann diese Theme-Datei in unseren Komponenten und ersetzen hartkodierte Werte durch Variablen:

components/Layout.js

import theme from '../styles/theme';
 
function Layout(props) {
  return (
    <div className="page-wrapper">
      {props.children}
      <style jsx global>{`
        body {
          background: ${theme.colors.background};
          color: ${theme.colors.text};
          font-family: ${theme.fontFamily.sansSerif};
        }
      `}</style>
      <style jsx global>{`
        body {
          margin: 0;
          padding: 0;
          font-size: 18px;
          font-weight: 400;
          line-height: 1.8;
        }
        h1 {
          font-weight: 700;
        }
        p {
          margin-bottom: 10px;
        }
      `}</style>
    </div>
  );
}
 
export default Layout;

components/Alert.js

import theme from '../styles/theme';
 
function Alert(props) {
  return (
    <div className="alert">
      {props.children}
      <style jsx>{`
        .alert {
          display: inline-block;
          padding: 20px;
          border-radius: 8px;
        }
      `}</style>
      <style jsx>{`
        .alert {
          background: ${props.type == 'warning'
            ? theme.colors.warning
            : theme.colors.light};
        }
      `}</style>
    </div>
  );
}
 
export default Alert;

In diesem Blogpost haben wir behandelt, wie Sie mit Styled JSX beginnen können. Um mehr über zusätzliche Funktionen zu erfahren, sollten Sie es auf GitHub auschecken.