Application de styles en ligne dans React

1. Style en ligne dans React
2. React au style en ligne conditionnel

Le style des éléments ou composants HTML est au cœur du travail du développeur front-end. Les styles sont essentiels pour assurer le placement et l’apparence appropriés de l’élément HTML. Les développeurs React appliquent des styles en utilisant de nombreuses approches différentes. L’un des moyens les plus populaires consiste à utiliser des styles en ligne. Dans l’article d’aujourd’hui, nous voulions discuter des avantages et des inconvénients de l’utilisation de styles en ligne.

Style en ligne dans React

Les développeurs React ont généralement une manière préférée de styliser leurs composants. Certains créent des fichiers CSS séparés pour chaque composant, tandis que d’autres combinent tous leurs styles dans un seul fichier. Lorsque vous écrivez des styles pour une application entière dans un seul fichier, vous êtes beaucoup plus susceptible de manquer de noms descriptifs (et uniques) pour les classes.

Les définitions de style en ligne vous permettent de styliser les composants sans créer deux fichiers séparés pour JavaScript et CSS. Les styles définis de cette manière sont plus lisibles que les règles CSS globales, et lorsque vous les utilisez, vous êtes moins susceptible de rencontrer des problèmes de nommage.

Syntaxe

Les styles en ligne dans React fonctionnent comme vous vous en doutez si vous les avez utilisés en HTML. Tout comme en HTML, les styles en ligne dans React sont définis à l’aide de l’attribut style. De plus, de la même manière que HTML, les styles en ligne remplacent également les classes dans React.

Parlons maintenant des différences. Pour styliser vos composants ou éléments dans JSX, vous devez fournir un objet (ou une référence à un objet) représentant les styles. Pour vous assurer que JSX peut déchiffrer votre objet de style, vous devez le placer dans une paire d’accolades. Voici à quoi ressemblerait une simple déclaration de style en ligne :

<h1 style={{display: "none"}}>Hi! Try edit me</h1>;

Dans cet exemple, la couche externe des accolades garantit que l’objet qu’elles contiennent est évalué en tant qu’expression JavaScript.

En ce qui concerne la syntaxe, la plus grande différence entre les styles en ligne dans React et HTML est probablement que vous ne pouvez pas utiliser les noms de propriété CSS normaux dans les styles en ligne de React. Les propriétés constituées d’un seul mot sont généralement les mêmes, mais celles constituées de plusieurs mots sont généralement combinées en un seul mot et écrites en camelCase. Par exemple, la propriété font-size devient font-size dans les styles React.

Essentiellement, les styles en ligne dans React sont représentés comme un objet, avec des paires clé-valeur qui correspondent aux propriétés CSS et à leurs valeurs. Une virgule doit séparer les paires clé-valeur ; sinon, vous pourriez obtenir une erreur.

React au style en ligne conditionnel

Votre code JSX peut contenir des objets JavaScript qui peuvent être compilés dans des styles valides. C’est une fonctionnalité extrêmement utile car elle nous permet d’appliquer des styles de manière conditionnelle. Nous pouvons utiliser l’opérateur ternaire JavaScript dans les accolades pour définir des conditions complexes pour décrire les instances où les styles doivent s’appliquer.

Imaginons que notre site Web ait un thème sombre et un thème clair. Nous pouvons utiliser la propriété dark dans l’objet state du composant pour basculer conditionnellement entre les deux thèmes. Voici un exemple.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    return <div>
              <h1 style={{backgroundColor: this.state.dark ? "black" : "white", color: this.state.dark ? "white" : "black"}}>
                  Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

Ce qui précède est une démonstration simple de l’utilité des styles en ligne.

Dans l’extrait de code ci-dessus, vous avez peut-être remarqué que notre objet de style est trop long et peut être difficile à suivre. Au lieu d’écrire l’objet entier entre les accolades, nous pouvons le définir ailleurs et le référencer. Lorsque vous remarquez que votre objet de style en ligne contient trop de règles, déplacez-le en dehors du JSX. Vous pouvez créer une variable avec un nom descriptif pour stocker l’objet de style et utiliser le nom de la variable pour le référencer. De cette façon, vos styles sont plus faciles à lire. Voici un exemple.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    const darkThemeStyles = {
       backgroundColor: this.state.dark ? "black" : "white",
       color: this.state.dark ? "white" : "black"   
    }
    return <div>
              <h1 style={darkThemeStyles}>Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

De cette façon, le code JSX sous votre instruction return est plus facile à lire et semble beaucoup plus propre.

Certains développeurs React adorent les styles en ligne car ils sont facilement lisibles et leur portée est limitée à un seul composant au lieu d’être définie globalement. Les personnes travaillant sur un composant peuvent facilement comprendre comment le composant est stylisé.

Cependant, il y a des cas où CSS est toujours utile. Par exemple, il a :hover et de nombreux autres sélecteurs, que JavaScript n’a pas.