Maison  >  Article  >  interface Web  >  Comment introduire le CSS dans React

Comment introduire le CSS dans React

醉折花枝作酒筹
醉折花枝作酒筹original
2021-07-23 11:46:144083parcourir

Les méthodes d'introduction incluent : 1. Style en ligne ; 2. Le style de déclaration, le style en ligne est similaire, la différence est qu'une variable est déclarée pour enregistrer la feuille de style et liée à l'attribut de style 3. Introduction d'importation, le composant React est ; généralement un dossier, dans le dossier Contient les js et css correspondants, il suffit d'introduire le même niveau de css dans js.

Comment introduire le CSS dans React

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

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

Dans React, si vous écrivez des styles en ligne directement de la manière ci-dessus, une erreur sera signalée directement, car la syntaxe JSX n'est pas prise en charge les trois méthodes d'écriture CSS suivantes :

1.

...
<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 déclaré

Le style déclaré est similaire au style en ligne. La seule différence est qu'une variable est déclarée pour enregistrer la feuille de style et est liée à l'attribut de style.

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

3.import introduction

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

import &#39;./mystyle.css&#39;;

Apprentissage recommandé :

Tutoriel vidéo CSS

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