Comment ajouter des styles pour réagir aux composants

Méthodes d'ajout de styles pour réagir aux composants : 1. En passant des objets de style via des expressions ; 2. En utilisant des styles en ligne 3. En définissant des noms de classe via des packages tiers 4. Grâce à des composants de style ; composants" pour ajouter des styles.

L'environnement d'exploitation de ce tutoriel : système windows7, version React16 Cette méthode convient à toutes les marques d'ordinateurs.

Quatre façons d'ajouter des styles aux composants React :

Style DOM dans le composant

La première : le style en ligne

Pensez Pour ajouter des styles en ligne au dom virtuel, vous devez utiliser une expression pour transmettre l'objet de style :

// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
 <p style={{color:&#39;red&#39;, fontSize:&#39;14px&#39;}}>Hello world</p>

Les styles en ligne doivent écrire un objet de style, et la position de cet objet de style peut être placée dans de nombreux endroits, tels que les fonctions render In, les prototypes de composants et les fichiers js de liens externes

Le deuxième type : className (référence externe)

React recommande d'utiliser des styles en ligne, car React pense que chaque Le composant est un indépendant L'ensemble

En fait, dans la plupart des cas, nous ajoutons encore beaucoup de noms de classe aux éléments, mais il convient de noter que la classe doit être écrite comme className (car après tout, nous écrivons js, et nous recevrons les restrictions des règles js, et la classe est un mot-clé)

<p className="hello" style = {this.style}>Hello world</p>

Le troisième type : nom de classe/noms de classe définition de package tiers nom de classe

Parfois, vous devez ajoutez différents styles en fonction de différentes conditions, telles que : l'état d'achèvement, terminé est vert, inachevé est rouge. Dans ce cas, nous vous recommandons d'utiliser le package classname/classnames :

<p
    className = { 
        classname({
            size: true,
            bg: true
        })
    }
> 第三包classname定义 </p>

Le quatrième type : styled-components

styled-components est un ensemble de CSS écrit pour le framework React -in-js, pour parler simplement, c'est écrire du CSS en js. lien npm

styled-components est un package tiers, vous devez l'installer

const Container = styled.div`
    width: 100px;
    height: 100px;
    background: pink;
    color: white;
`

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!