Maison > interface Web > js tutoriel > Comment introduire les styles CSS dans React

Comment introduire les styles CSS dans React

王林
Libérer: 2021-01-18 17:43:59
original
3469 Les gens l'ont consulté

Comment introduire le style CSS dans React : déclarez d'abord le style dans la fonction de rendu, tel que [render() {let mystyle = {}}], puis référencez le style, tel que [return(< div style ={mystyle}>

);].

Comment introduire les styles CSS dans React

L'environnement de cet article : Windows10, version React16&&css3, ordinateur Dell G3.

(Partage de vidéos d'apprentissage : tutoriel vidéo React)

React propose trois façons d'introduire les styles CSS :

1. Style en ligne : directement dans le. composant Définition interne

<div style={{width:&#39;20px&#39;,height:&#39;30px&#39;}}>
    First Way!
</div>
Copier après la connexion

2. Style de déclaration : déclarez d'abord dans la fonction de rendu, puis référencez

render() {
    let mystyle = {
         width:&#39;20px&#39;,
         height:&#39;30px&#39;
    }

    return(
        <div style={mystyle}>
            Second Way!
        </div>
    );
}
Copier après la connexion

3. Introduisez le style : introduisez un fichier CSS externe, le fichier CSS externe est un CSS ordinaire. Utilisez l'instruction suivante après l'instruction import dans le composant js.

requre(&#39;./mystyle.css&#39;);
Copier après la connexion

Recommandations associées : Tutoriel js

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal