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

Comment introduire les styles CSS dans React

王林
王林original
2020-11-27 09:44:163461parcourir

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(2b215d4773261218a7856f68d5dacf5a16b28748ea4df4d9c2150843fecfba68);].

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>

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>
    );
}

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;);

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!

Déclaration:
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