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