Maison > interface Web > tutoriel CSS > le corps du texte

Style dans React

WBOY
Libérer: 2024-07-16 17:41:40
original
720 Les gens l'ont consulté

Styling in React

Introduction

Le style est un aspect crucial du développement Web qui garantit que vos applications sont visuellement attrayantes et conviviales. React propose plusieurs approches pour styliser les composants, du CSS et Sass traditionnels aux solutions CSS-in-JS modernes comme Styled-Components. Cette semaine, nous allons plonger dans ces méthodes et apprendre à les appliquer efficacement dans vos projets React.

Importance du style dans React

Un style approprié améliore l'expérience utilisateur, améliore la convivialité et rend votre application plus attrayante. Comprendre différentes techniques de style vous permet de choisir la meilleure approche pour les besoins spécifiques de votre projet.

CSS traditionnel

Utiliser CSS avec React :

  • Exemple de base :
  import React from 'react';
  import './App.css';

  function App() {
      return (
          <div className="container">
              <h1 className="title">Hello, World!</h1>
          </div>
      );
  }

  export default App;
Copier après la connexion
  • App.css :
  .container {
      text-align: center;
      padding: 20px;
  }

  .title {
      color: blue;
      font-size: 2em;
  }
Copier après la connexion
Copier après la connexion

Modules CSS :

  • Exemple :
  import React from 'react';
  import styles from './App.module.css';

  function App() {
      return (
          <div className={styles.container}>
              <h1 className={styles.title}>Hello, World!</h1>
          </div>
      );
  }

  export default App;
Copier après la connexion
  • App.module.css :
  .container {
      text-align: center;
      padding: 20px;
  }

  .title {
      color: blue;
      font-size: 2em;
  }
Copier après la connexion
Copier après la connexion

Utiliser Sass

Installation de Sass :

  • Commande d'installation :
  npm install node-sass
Copier après la connexion

Utiliser Sass dans React :

  • App.scss :
  $primary-color: blue;
  $padding: 20px;

  .container {
      text-align: center;
      padding: $padding;
  }

  .title {
      color: $primary-color;
      font-size: 2em;
  }
Copier après la connexion
  • Composant d'application :
  import React from 'react';
  import './App.scss';

  function App() {
      return (
          <div className="container">
              <h1 className="title">Hello, World!</h1>
          </div>
      );
  }

  export default App;
Copier après la connexion

Style imbriqué avec Sass :

  • Exemple :
  .container {
      text-align: center;
      padding: 20px;

      .title {
          color: blue;
          font-size: 2em;

          &:hover {
              color: darkblue;
          }
      }
  }
Copier après la connexion

Composants stylisés

Introduction aux composants stylisés :

  • Définition : une bibliothèque pour styliser les composants React à l'aide de littéraux de modèles balisés.
  • Installation :
  npm install styled-components
Copier après la connexion

Utilisation de composants stylisés :

  • Exemple :
  import React from 'react';
  import styled from 'styled-components';

  const Container = styled.div`
      text-align: center;
      padding: 20px;
  `;

  const Title = styled.h1`
      color: blue;
      font-size: 2em;

      &:hover {
          color: darkblue;
      }
  `;

  function App() {
      return (
          <Container>
              <Title>Hello, World!</Title>
          </Container>
      );
  }

  export default App;
Copier après la connexion

Thème avec des composants stylisés :

  • Créer un thème :
  import { ThemeProvider } from 'styled-components';

  const theme = {
      colors: {
          primary: 'blue',
          secondary: 'darkblue'
      },
      spacing: {
          padding: '20px'
      }
  };

  function App() {
      return (
          <ThemeProvider theme={theme}>
              <Container>
                  <Title>Hello, World!</Title>
              </Container>
          </ThemeProvider>
      );
  }
Copier après la connexion
  • Utilisation des valeurs du thème :
  import styled from 'styled-components';

  const Container = styled.div`
      text-align: center;
      padding: ${(props) => props.theme.spacing.padding};
  `;

  const Title = styled.h1`
      color: ${(props) => props.theme.colors.primary};
      font-size: 2em;

      &:hover {
          color: ${(props) => props.theme.colors.secondary};
      }
  `;
Copier après la connexion

Conclusion

Le choix de la bonne approche de style dans React dépend des exigences de votre projet et de vos préférences personnelles. CSS et Sass traditionnels offrent familiarité et simplicité, tandis que Styled-Components offre des capacités de style dynamiques et étendues. La maîtrise de ces techniques vous aidera à créer des interfaces utilisateur belles et maintenables.

Ressources pour un apprentissage plus approfondi

  • Cours en ligne : des sites Web comme Udemy, Pluralsight et freeCodeCamp proposent des cours sur les techniques de style React.
  • Livres : "React and React Native" d'Adam Boduch et "React Quickly" d'Azat ​​Mardan.
  • Documentation et références :
    • Documentation des composants stylisés
    • Documentation Sass
    • Documentation des modules CSS React
  • Communautés : rejoignez les communautés de développeurs sur des plateformes telles que Stack Overflow, Reddit et GitHub pour bénéficier d'assistance et de réseautage.

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal