Comment utiliser CSS dans Media Queries avec des composants stylisés dans React js

Étape 1 : Installer les composants stylisés
Tout d’abord, assurez-vous que les composants stylisés sont installés dans votre projet. Sinon, vous pouvez l'installer en utilisant npm ou Yarn :

npm install styled-components

Étape 2 : Créer un composant stylisé avec des requêtes multimédias
Vous pouvez créer un composant stylisé et y utiliser des requêtes multimédias. Voici un exemple de composant Container réactif qui change sa couleur d'arrière-plan en fonction de la largeur de l'écran :

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;

Explication
Importer des composants stylisés : Importez l'objet stylisé à partir de composants stylisés.
Créer un composant stylisé : Définissez un composant conteneur stylisé. Le conteneur aura une couleur d'arrière-plan par défaut bleu clair.
Ajouter des requêtes multimédias :
Pour les écrans d'une largeur maximale de 768 px, changez la couleur d'arrière-plan en corail clair.
Pour les écrans d'une largeur maximale de 480 px, changez la couleur d'arrière-plan en vert clair.
Utilisez le composant stylisé : Utilisez le composant Container dans votre composant App. Tout contenu à l'intérieur du conteneur se verra appliquer les styles, y compris les requêtes multimédias.

Étape 3 : rendre l'application
Lorsque vous exécutez votre application React, vous devriez voir le conteneur changer sa couleur d'arrière-plan en fonction de la largeur de l'écran :

Par défaut : bleu clair
Largeur maximale 768px : corail clair
Largeur maximale 480px : vert clair
De cette façon, vous pouvez facilement ajouter des styles réactifs à vos composants React à l'aide de requêtes multimédia CSS avec des composants stylisés.

Conseils supplémentaires
Vous pouvez ajouter des styles et des requêtes multimédias plus complexes selon vos besoins.
La combinaison de requêtes multimédias avec d'autres fonctionnalités de composants stylisés (par exemple, des thèmes) peut rendre vos styles encore plus puissants et maintenables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!