Maison > Article > interface Web > 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:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}}>测试数据</div>
...
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:'200px', height:'80px', backgroundColor:'yellow', fontSize:'24px', textAlign:'center' }}>测试数据</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 CSSCe 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!