Can react introduce css?

react can introduce css. Method: 1. Use "style={{css style}}" directly inside the component to introduce css; 2. First declare a variable in the render function to save the style sheet binding to style. attribute, and then quote; 3. Use "import 'css path'" to introduce the css file.

The operating environment of this tutorial: windows7 system, react16 version. This method is suitable for all brands of computers.

Recommended learning: "Programming Video"

CSS can be introduced in React. However, if you write the inline style directly in the following way, an error will be reported directly because JSX syntax is not supported.

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

React supports the following three methods of writing css: [Related tutorial recommendations: React video tutorial]

1. Inline style: directly inside the component Definition

...
<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: declare first in the render function, and then quote

The declaration style is similar to the inline style, the only difference is that a variable is declared to save Style sheets are bound to the style attribute.

render() {
    let mystyle = {
         width:'200px',
		 height:'80px',
		 backgroundColor:'yellow',    　　　　
		 fontSize:'24px',    　　　　
		 textAlign:'center'   　
    }
    return(
        <div style={mystyle}>
            测试数据
        </div>
    );
}

3. Use import to introduce external css style files

A React component is generally a folder that contains the corresponding js and css. As long as it is in Just introduce the same level of css into js.

import './mystyle.css';

If you want to read more related articles, please visit PHP Chinese website! !

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