So verwenden Sie CSS in Medienabfragen mit gestalteten Komponenten in React js

Schritt 1: Installieren Sie gestaltete Komponenten
Stellen Sie zunächst sicher, dass in Ihrem Projekt styled-components installiert sind. Wenn nicht, können Sie es mit npm oder Yarn installieren:

npm install styled-components

Schritt 2: Erstellen Sie eine gestaltete Komponente mit Medienabfragen
Sie können eine gestaltete Komponente erstellen und darin Medienabfragen verwenden. Hier ist ein Beispiel für eine responsive Container-Komponente, die ihre Hintergrundfarbe basierend auf der Bildschirmbreite ändert:

import React from 'react';
import styled from 'styled-components';

// Define the styled component with media queries
const Container = styled.div`
  width: 100%;
  height: 100vh;
  background-color: lightblue;

  @media (max-width: 768px) {
    background-color: lightcoral;
  }

  @media (max-width: 480px) {
    background-color: lightgreen;
  }
`;

const App = () => {
  return (
    <Container>
      <h1>Hello, World!</h1>
    </Container>
  );
};

export default App;

Erklärung
Stilisierte Komponenten importieren:Importieren Sie das gestaltete Objekt aus gestalteten Komponenten.
Erstellen Sie eine gestaltete Komponente: Definieren Sie eine gestaltete Containerkomponente. Der Container hat standardmäßig die Hintergrundfarbe Hellblau.
Medienabfragen hinzufügen:
Ändern Sie bei Bildschirmen mit einer maximalen Breite von 768 Pixel die Hintergrundfarbe in Lightcoral.
Ändern Sie bei Bildschirmen mit einer maximalen Breite von 480 Pixeln die Hintergrundfarbe in Hellgrün.
Verwenden Sie die gestaltete Komponente:Verwenden Sie die Container-Komponente in Ihrer App-Komponente. Auf alle Inhalte im Container werden die Stile angewendet, einschließlich der Medienabfragen.

Schritt 3: Rendern Sie die App
Wenn Sie Ihre React-Anwendung ausführen, sollten Sie sehen, wie der Container seine Hintergrundfarbe basierend auf der Bildschirmbreite ändert:

Standard: hellblau
Maximale Breite 768px: Lightcoral
Maximale Breite 480 Pixel: hellgrün
Auf diese Weise können Sie mithilfe von CSS-Medienabfragen mit gestalteten Komponenten ganz einfach reaktionsfähige Stile zu Ihren React-Komponenten hinzufügen.

Zusätzliche Tipps
Sie können bei Bedarf komplexere Stile und Medienabfragen hinzufügen.
Durch die Kombination von Medienabfragen mit anderen Stilkomponentenfunktionen (z. B. Themen) können Ihre Stile noch leistungsfähiger und wartbarer werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS in Medienabfragen mit gestalteten Komponenten in React js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!