Insertion de données dans l'attribut style à partir d'un fichier séparé dans React

Nous pouvons éviter d'écrire les objets de style dans le fichier du composant, comme dans la leçon précédente, et créer un fichier séparé contenant nos objets de style et les importer dans le composant nécessaire.

Alors, prenons notre composant sans styles CSS :

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Créons dans le dossier src un fichier séparé styles.js, dans lequel nous écrirons nos objets de style :

styles.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center',
};

const class2 = {
  color: 'orangered',
  fontWeight: 'bold',
};

const class3 = {
  fontStyle: 'italic',
  color: 'brown',
};

const class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
};

N'oublions pas en bas du fichier styles.js d'exporter nos objets en un seul objet styles :

styles.jsexport const styles = {
  class1: class1,
  class2: class2,
  class3: class3,
  class4: class4
};

Maintenant, importons l'objet styles dans notre composant :

App.jsimport { styles } from "./styles";       

Maintenant, nous pouvons appliquer l'objet de styles CSS dont nous avons besoin à partir de l'objet global styles à nos balises. Appliquons au premier paragraphe les styles de l'objet class2 :

App.js<p style={styles.class2}>text</p>

Ajoutons de manière similaire les styles des autres objets aux balises restantes.

En conséquence, le code du composant ressemblera à ceci :

App.jsfunction App() {
  return (
    <div style={styles.class1}>
      <p style={styles.class2}>text</p>
      <p style={styles.class3}>text</p>
      <p style={styles.class4}>text</p>
    </div>
  );
}