React peut-il introduire du CSS ?

React peut introduire le CSS. Méthode : 1. Utilisez "style={{css style}}" directement à l'intérieur du composant pour introduire le CSS 2. Déclarez d'abord une variable dans la fonction de rendu pour enregistrer la liaison de la feuille de style ; pour styler l'attribut, puis citer ; 3. Utilisez "import 'css path'" pour introduire le fichier css.

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

Apprentissage recommandé : "Vidéo de programmation"

Le CSS peut être introduit dans React. Cependant, si vous écrivez le style en ligne directement de la manière suivante, une erreur sera directement signalée car la syntaxe JSX n'est pas prise en charge.

<div style="color:red">测试数据</div> //报错

React prend en charge les trois méthodes d'écriture CSS suivantes : [Recommandations de didacticiel associées : Tutoriel vidéo React]

1. Style en ligne : directement à l'intérieur du composant. Définition

...
<div style={{
    width:&#39;200px&#39;,
    height:&#39;80px&#39;,
    backgroundColor:&#39;yellow&#39;,    　　　　
    fontSize:&#39;24px&#39;,    　　　　
    textAlign:&#39;center&#39;   　　　　
}}>测试数据</div>
...

2. Style de déclaration : déclarez-le d'abord dans la fonction de rendu, puis citez

Le style de déclaration est similaire au style en ligne, le la seule différence est qu'une variable est déclarée comme étant sauvegardée. Les feuilles de style sont liées à l'attribut style.

render() {
    let mystyle = {
         width:'200px',
		 height:'80px',
		 backgroundColor:'yellow',    　　　　
		 fontSize:'24px',    　　　　
		 textAlign:'center'   　
    }
    return(
        <div style={mystyle}>
            测试数据
        </div>
    );
}

3. Utilisez l'importation pour introduire des fichiers de style CSS externes

Un composant React est généralement un dossier, qui contient les js et css correspondants. dans Introduisez simplement le même niveau de CSS dans js.

import './mystyle.css';

Pour plus d'articles connexes, veuillez visiter le Site Web PHP chinois ! !

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!