React introduction of three methods css

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

In React, if you write an inline style directly on the above approach will direct error, because the syntax does not support the JSX, React supports the following three methods to write the css:

1. inline style

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

2. Declare style

Similar declarations style and inline styles, the difference is only declare a variable to hold the style sheet to bind to the style attribute.

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

3.import introduced

React component is typically a folder, the folder containing the corresponding js css and, as long as the same level in the introduction to the js css.

import './mystyle.css';

Reproduced in: https: //www.jianshu.com/p/e0b8b4a62b7e