Définition des styles en ligne dans React.js

Définition des styles en ligne dans React.js #

Pour définir des styles en ligne dans React :

1. Définissez l’option style de l’élément à un objet.
2. Définissez les propriétés et valeurs CSS spécifiques pour styliser l’élément.
3. Par exemple, <div style={{backgroundColor: 'salmon', color: 'white'}}>.

const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  const elementWidth = 150;

  return (
    <div>
      {}
      <div style={{backgroundColor: 'salmon', color: 'white'}}>
        Some content
      </div>

      <br />

      {}
      <div style={stylesObj}>Some content</div>

      <br />

      {}
      <div
        style={{
          backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
          color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
        }}
      >
        Some content
      </div>

      <br />

      {}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Some content
      </div>
    </div>
  );
};

export default App;

L’exemple de code montre plusieurs façons de définir des styles en ligne sur un élément dans
React.js.

Le premier exemple définit les styles directement sur l’élément.

<div style={{backgroundColor: 'salmon', color: 'white'}}>
  Some content
</div>

Notez que les propriétés à plusieurs mots comme background-color sont en minuscules lorsqu’elles sont définies
sur le style objet.

La valeur de l’objet style est entourée de deux séries d’accolades.

Le deuxième exemple extrait l’objet styles dans une variable.

const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  return (
    <div>
      {}
      <div style={stylesObj}>Some content</div>
    </div>
  );
};

export default App;

Vous pouvez utiliser cette approche lorsque vous avez plusieurs éléments qui partagent les mêmes
styles.

Vous pouvez également définir des styles en ligne de manière conditionnelle dans React en utilisant l’opérateur ternaire
opérateur ternaire.

<div
  style={{
    backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
    color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
  }}
>
  Some content
</div>

L’opérateur ternaire est très similaire à l’opérateur if/else déclaration.

L’opérateur ternaire dans l’exemple vérifie si la partie length de la chaîne de caractères hi est
égale à 2 et si c’est le cas, il renvoie la chaîne de caractères violet pour le
backgroundColor sinon, il renvoie mediumblue.

Vous pouvez également interpoler des expressions ou des variables avec une chaîne de caractères lors de la définition de
styles en ligne.

const App = () => {
  const elementWidth = 150;

  return (
    <div>
      {}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Some content
      </div>
    </div>
  );
};

export default App;

Nous avons utilisé un
littéral de modèle
pour concaténer une chaîne de caractères et une variable lors de la définition des styles.

Le site width propriété de la div a pour valeur 150px.

La syntaxe du signe dollar et des accolades nous permet d’utiliser des caractères de remplacement qui sont
évalués.

Un modèle couramment utilisé dans React consiste à extraire des composants enveloppants avec des
styles prédéfinis qui rendent leur children prop.

function BoldText({children}) {
  return <span style={{fontWeight: 'bold'}}>{children}</span>;
}

const App = () => {
  return (
    <div>
      <p>
        Hello <BoldText>World</BoldText>
      </p>
    </div>
  );
};

export default App;

Il s’agit d’un exemple très simple, mais le BoldText définit certains styles sur un élément
un élément et rend son children prop.

Une alternative à l’écriture de styles en ligne dans React est d’écrire vos styles dans un fichier
avec un fichier .css d’extension.

.bg-salmon {
  background-color: salmon;
}

.text-white {
  color: white;
}

.font-lg {
  font-size: 2rem;
  padding: 10px 10px;
}

Et voici comment nous allons importer et utiliser les classes.

import './App.css';

const App = () => {
  return (
    <div>
      <p className="bg-salmon text-white font-lg">hello world</p>
    </div>
  );
};

export default App;

Le site index.js est le point d’entrée de votre application React, il sera donc toujours exécuté.
être exécuté.

D’autre part, si vous importez un fichier CSS dans un composant, les styles CSS peuvent être supprimés une fois le composant démonté.
peuvent être supprimés lorsque le composant est démonté.