How to introduce css in react

醉折花枝作酒筹
Release: 2023-01-07 11:45:27
Original
4079 people have browsed it

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.

How to introduce css in react

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

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

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>
...
Copy after login
Copy after login

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>
...
Copy after login
Copy after login

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 &#39;./mystyle.css&#39;;
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template