How to introduce css in react

Introduction methods include: 1. Inline style; 2. Declaration style, inline style is similar, the only difference is that a variable is declared to save the style sheet and bound to the style attribute; 3. Import introduction, React components are generally a folder , the folder contains the corresponding js and css, just introduce the same level css into js.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

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

In React, if you write inline styles directly in the above way, an error will be reported directly, because JSX syntax is not supported. React supports the following three methods of writing css:

1. Inline style

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

2. Declaration style

Declaration style is similar to inline style. The only difference is that a variable is declared to save the style sheet and is bound to the style attribute. .

...
<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

A React component is generally a folder, which contains the corresponding js and css. As long as the same level is introduced in the js Just css.

import './mystyle.css';

Recommended learning: css video tutorial

The above is the detailed content of How to introduce css in react. For more information, please follow other related articles on the PHP Chinese website!