Styling

Introduction

En général, React permet au composant d'être stylé en utilisant une classe CSS à travers l'attribut className. Étant donné que React JSX prend en charge les expressions JavaScript, un grand nombre de méthodes CSS courantes peuvent être utilisées. Certaines des principales options sont les suivantes

• CSS stylesheet − Styles CSS normaux avec className ;
• Inline styling − Les styles CSS en tant qu'objets JavaScript avec les propriétés camelCase ;
• CSS Modules − Styles CSS à portée locale ;
• Styled component − Styles au niveau des composants ;
• Sass stylesheet − Supporte les styles CSS basés sur Sass en convertissant les styles en css normal au moment de la construction ;
• Post processing stylesheet − Supporte les styles de post-traitement en convertissant les styles en css normaux au moment de la construction.

Dans ce cours, nous allons apprendre à appliquer ces trois méthodes importantes pour styliser notre composant.

• CSS Stylesheet
• Inline Styling
• CSS Modules

CSS Stylesheet

La feuille de style CSS est une méthode habituelle, courante et éprouvée. Il suffit de créer une feuille de style CSS pour un composant et de saisir tous vos styles pour ce composant particulier. Ensuite, dans le composant, utilisez className pour faire référence aux styles.

Stylisons notre composant ExpenseEntryItem.

Ouvrez l'application de gestion des dépenses dans votre éditeur préféré.

Ensuite, ouvrez le fichier ExpenseEntryItem.css et ajoutez quelques styles.

div.itemStyle { 
    color: brown; 
    font-size: 14px; 
}

Ensuite, ouvrez ExpenseEntryItem.js et ajoutez className au conteneur principal.

import React from 'react';
import './ExpenseEntryItem.css';

class ExpenseEntryItem extends React.Component {
    render() {
        return (
            <div className="itemStyle">
                <div><b>Item:</b> <em>Mango Juice</em></div>
                <div><b>Amount:</b> <em>30.00</em></div>
                <div><b>Spend Date:</b> <em>2020-10-10</em></div>
                <div><b>Category:</b> <em>Food</em></div>
            </div>
        );
    }
}
export default ExpenseEntryItem;

Ensuite, servez l'application en utilisant la commande npm.

npm start

Ensuite, ouvrez le navigateur et entrez http://localhost:3000 dans la barre d'adresse et appuyez sur la touche Entrée.

La feuille de style CSS est facile à comprendre et à utiliser. Mais, lorsque la taille du projet augmente, les styles CSS augmentent également et créent finalement beaucoup de conflits dans le nom des classes. De plus, le chargement direct du fichier CSS n'est pris en charge que par le bundler Webpack et peut ne pas l'être par d'autres outils.