Comment introduire le CSS dans React

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.

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 './mystyle.css';

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!