Comment ajouter du CSS à votre composant React

Êtes-vous bloqué sur la façon de faire en sorte que votre composant adopte ces styles incroyables ? Ne vous inquiétez plus, nous discuterons ici de trois façons qui vous aideront à mettre en œuvre vos magnifiques créations. C'est bien si vous avez une certaine compréhension du CSS et du Javascript en lisant cet article. Allons-y !

1. Utilisation d'une feuille de style CSS.

Cela implique d'écrire vos propres styles CSS dans un fichier séparé, puis de l'importer dans votre composant.
N'oubliez pas d'utiliser l'extension .css lorsque vous nommez le fichier. Vérifiez l'exemple de code ci-dessous.

//Votre fichier CSS

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//Importez votre fichier CSS dans votre composant.
// Vous donnez au fichier CSS le nom de votre choix.

import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );

}
}

1. Utilisation du module CSS

Peut-être que vous n'aimez pas la première méthode, ou peut-être qu'elle ne convient pas à votre façon d'écrire du code.
Vous pouvez utiliser notre deuxième méthode. Ici, vous créerez également un fichier séparé dans lequel vous écrirez votre CSS mais cette fois avec une extension différente ; le .module.css

// Votre module CSS.
// monstyle.module.css

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//Importez le module dans votre composant.

import styles from './mystyle.module.css'; 

class Car extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

1. Utiliser le style en ligne

On peut obtenir un style en ligne en utilisant l'attribut style style='styles here'. Cependant, il faut être prudent car tout ce qui se passe dans l'attribut style en tant que valeur n'est pas votre sélecteur CSS typique mais un objet javascript, et par conséquent, il devrait prendre la syntaxe d'un objet.

C'est ce que je veux dire ;

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Remarquez les doubles accolades, notez également la syntaxe clé: valeur de paire utilisée pour écrire des objets javascript.

Une autre chose à garder à l'esprit est que lors de l'écriture de propriétés d'objet qui ont deux noms, par exemple background-color, il est nécessaire d'utiliser camelCase backgroundColor

Astuce : Vous pouvez créer un objet avec tout votre code de style et l'appeler dans l'attribut style.

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

A noter l'absence d'accolades doubles.

J'espère que cela vous a été utile et que vous avez aimé le lire. J'apprécie les commentaires afin d'améliorer mon article lors de la prochaine rédaction. Merci

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!