Bagaimana untuk memperkenalkan css dalam reaksi

Kaedah pengenalan termasuk: 1. Gaya sebaris; 2. Gaya pengisytiharan, gaya sebaris adalah serupa, satu-satunya perbezaan adalah untuk mengisytiharkan pembolehubah untuk menyimpan helaian gaya dan mengikatnya pada atribut gaya; , Komponen React biasanya folder , folder mengandungi js dan css yang sepadan, cuma masukkan css tahap yang sama ke dalam js.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

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

Dalam React, jika anda menulis gaya sebaris secara langsung dengan cara di atas, ralat akan dilaporkan secara langsung, kerana sintaks JSX tidak disokong menyokong tiga kaedah menulis css berikut:

1. Gaya sebaris

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

Gaya pengisytiharan

Gaya pengisytiharan adalah serupa dengan gaya sebaris bahawa pembolehubah diisytiharkan untuk menyimpan pengikatan helaian gaya Memandangkan atribut gaya.

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

3.pengenalan import

Komponen React secara amnya ialah folder, yang mengandungi js dan css yang sepadan asalkan yang sama diimport ke dalam js Tahap css sudah memadai.

import './mystyle.css';

Pembelajaran yang disyorkan: tutorial video css

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan css dalam reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!