Comment introduire des styles dans React

Comment introduire des styles dans React : 1. Style de module, méthode d'introduction [import './index.css';]; 2. Style en ligne, le code est [f085658fef72f439926c8b49c9a9d2d6】.

Recommandations d'apprentissage associées : Tutoriel vidéo React

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

Comment introduire des styles dans React :

1. Style de module

Lorsque vous construisez le framework pour la première fois, quand je. Je suis sur le point de commencer à écrire des affaires, je vais rencontrer le problème de savoir comment introduire les styles sur la première page. J'ai rencontré quelques pièges au lieu d'utiliser le style, il n'est pas nécessaire d'introduire directement le CSS. est comme ça.

<div className=&#39;topHead back fs14&#39;>
     <img src=&#39;/images/highLevel.png&#39; className=&#39;levelSize&#39;/>
</div>

Utilisez le formulaire className

Méthode d'introduction

import './index.css';

index.css

@import '~antd/dist/antd.css';
.topHead {
    width: 100%;
    height: 100px;
    display: flex;  
    align-items: center;
}
.back{
    background-image: url('/images/homeBackImg.png');
}
.levelSize{
    width: 80px;
    height: 80px; 
}
.levelColor{
    color:#ffffff;
}

2. >

Le style en ligne est différent du style='margin:0px' normal, il devrait être comme ceci

 <Divider style={{margin:&#39;0px&#39;}}/>
也是用的style，但书写方式不一样了

Recommandations d'apprentissage gratuites associées :

javascript (vidéo)

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!